美文网首页
原生javascript选择器

原生javascript选择器

作者: 米旦 | 来源:发表于2019-07-09 11:30 被阅读0次
javascript常用的选择器有getElementById() getElementsByName() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll()
getElementById('id') :返回对指定ID的第一个对象的引用。

getElementsByName('name'):返回文档中name属性为name值的元素,因为name属性值不是唯一的,
所以查询到的结果有可能返回的是一个数组,而不是一个元素。

getElementsByTagName('tagname'):返回文档中指定标签的元素。

getElementsByClassName('className'):返回文档中所有类名为className的元素。

querySelector(selector):返回文档中匹配指定css选择器的第一个元素。
querySelector('.className')
querySelector('#id')
querySelector('[attributte]')
querySelector('tag')
层叠选择器:
elem = document.querySelector('body > div > form');
elem = document.querySelector('body > div > form.tsf.nj > div');
同辈元素选择器: 
function sibilings(el){
        //a是 el的同辈元素集合
        var a=[];
        var p= el.previousSibling;
        while (p) {
            if(p.nodeType === 1){
                a.push(p);
            }
            p= p.previousSibling;
        }
        a.reverse();
        var n= el.nextSibling;
        while (n){
            if(n.nodeType === 1){
                a.push(n);
            }
            n= n.nextSibling;
        }
        return a;
    }
brother_elements = sibilings(document.querySelector('target_dom'));

属性过滤选择器:
elem = document.querySelector('input[name=testInput]');
其他选择器:
elem = document.querySelector('input[name=testInput]').nextElementSibling;

querySelectorAll():返回文档中匹配指定css选择器的所有元素,返回类型为NodeList。
elem = document.querySelectorAll('div > h1');
返回的是div后直接跟一个h1标签的所有h1标签元素。

相关文章

  • 原生javascript选择器

    javascript常用的选择器有getElementById() getElementsByName() get...

  • 事件

    事件 1.事件驱动与数据驱动 用原生JavaScript事件驱动通常是这样的流程: 先通过特定的选择器查找到需要操...

  • Ajax-XMLHttpRequest学习笔记

    最近回归到原生JavaScript巩固基础,学习了原生JavaScript的ajax操作。 XMLHttpRequ...

  • Js JQ 选择器总结

    一、原生JS选择器 JS选择器常用的有getElementById()、getElementsByName()、g...

  • 100个原生JavaScript使用功能代码片段

    100个原生JavaScript使用功能代码片段 目录 1、原生JavaScript实现字符串长度截取2、原生Ja...

  • JQ二刷

    1. JQ操作和原生JS操作 2.选择器 2.1基本选择器 2.2后代选择器 2.3 索引选择器 2.4 显示隐藏...

  • jQuery 性能优化

    关于选择器 总是从 ID 选择器开始继承jQuery 选择器对 ID 的选择是使用原生的 getElementBy...

  • js选择器

    原生JS选择器有getElementById、getElementsByName、getElementsByTag...

  • 分享一些前端开发中最常用的JS代码片段~ 干货~

    HTML5 DOM 选择器 javascript 代码 阻止默认行为 javascript 代码 阻止冒泡 jav...

  • 08-jQuery

    一.初识jQuery 二.jQuery与原生DOM互转 三.基本选择器 四.层级选择器 五.伪类选择器 六.属性操...

网友评论

      本文标题:原生javascript选择器

      本文链接:https://www.haomeiwen.com/subject/udhtkctx.html