JavaScript DOM查询，原生js实现元素子节点的获取

时间 2020-06-08

标签 javascript dom 查询原生实现元素节点获取栏目 JavaScript 繁體版

原文原文链接

　　每一个网页都是一个dom树，网页中全部的内容都是这个树上的一个节点。JavaScript的工做就是操做这些节点，对节点进行查增删改操做，或是给节点绑定事件。javascript

要操做dom节点，首先要获取到dom节点。这里我介绍几个原生js获取元素子节点的方法：css

1、经过属性值获取后代节点 html

以getElementBy开头的方法，能够根据具体的属性获取元素的后代节点。前端

这种方法不仅会获取子节点，他也会获取到全部符合条件的后代节点。java

方法	依据属性	兼容性	其余
getElementById	id	兼容性好，推荐使用node	若是存在多个id相同的元素，只会返回第一个数组
getElementsByTagName	标签名	不兼容ie8及如下版本	返回全部符合条件的元素的集合
getElementsByName	name	不兼容ie8及如下版本	返回全部符合条件的元素的集合
getElementsByClassName	class	不兼容ie8及如下版本	返回全部符合条件的元素的集合

以getElementById为例，尽管有两个id为’Jan‘的元素，可是只会获取到第一个：dom

<html>
    <head>
    </head>
    <body>
        <p id='Jan' class='test'>1</p>
        <p id='Jan' class='test'>2</p>
        <p id='Mar'>3</p>
    </body>
    <script type="text/javascript">
        var j=document.getElementById('Jan');
        console.log(j);
    </script>
</html>

须要注意的是，在同一个文件中出现重复id是不符合规范的，应当尽可能避免这样使用。spa

若是将上面代码中的getElementById('Jan')换成 getElementsByTagName('p')或者是getElementsByClassName('test')将会获取到符合条件的结果集。code

2、childNodes属性

childNodes属性能够获取元素的全部子节点，并封装到一个数组中，能够经过下标来获取某个子元素：

<html>
    <head>
    </head>
    <body>
        <div class="test" id="test">
        　　<p>1</p>
        　　<p>3</p>
        　　<p>5</p>
        </div>
    </body>
    <script>
        var a = document.getElementById("test");
        console.log(a.childNodes);
    </script>
</html>

class=‘test’的div中只有3子节点，执行结果却有7个节点：

由于根据在网页中，标签之间的回车空格等特殊字符属于一个p元素，上面的div中输入了4个回车，所以会多出四个text节点：

要解决这个问题有两个方法：

方法一：去掉全部的回车空格等特殊字符，可是会影响程序的可读性和代码的规范。

方法二：动态过滤掉空白字符：

经过for循环遍历对象中的全部元素，删除纯文本元素。

完整的代码就是这样：

        var a = document.getElementById("test");
        var b = a.childNodes;
        for(i=0;i<b.length;i++){
            if(b[i].nodeName == "#text"&& !/\s/.test(b.nodeValue)){
                a.removeChild(b[i]);
            }
        }

第二种方法每次查询以前，都要先执行一段过滤代码。这样会影响程序的执行效率，所以childNodes属性不建议使用。

3、child属性

相比childNodes，child属性不会将空格做为文本节点获取。所以就不须要额外的去除空格操做，获取节点的方式和chlidNodes属性相同。

        var a = document.getElementById("test").children;

除此以外还有

firstchild属性：获取第一个子节点

lastchild属性：获取最后一个子节点

child属性存在的缺点是会获取所有的子节点，使用时须要筛选，不够灵活。

4、querySelector方法，强烈推荐！

querySelector的参数是css选择器，任何选择器均可以做为它的参数，这样就使得它很是方便灵活：

好比获取class=‘test’的标签下的第一个子元素，能够这样写querySelector('.test > * ')，也能够指定子元素的类型querySelector('.test > span ')，或者是：classquerySelector('.test > #f_div')

还可使用querySelectorAll方法，这样会获取全部知足条件的元素，而不仅是获取第一个元素。

<div class="first">
    <span>张三</span>
</div>
<div id="second">
    <div id=f_div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    //经过类选择器获取节点
    doucument.querySelector('.first');
    //经过id选择器获取节点
    doucument.querySelector('#second');
    //经过伪类选择器获取子节点
    document.querySelector('.first>span');
    //确认selectAll批量获取节点
    document.querySelectorAll('#second>div');
</script>

querySelector方法能够兼容到IE8，基本能知足前端开发兼容性的须要。