JavaScriptDOM查询，原⽣js实现元素⼦节点的获取
  每个⽹页都是⼀个dom树，⽹页中所有的内容都是这个树上的⼀个节点。JavaScript的⼯作就是操作这些节点，对节点进⾏查增删改操作，或是给节点绑定事件。
⽹页
dom树
要操作dom节点，⾸先要获取到dom节点。这⾥我介绍⼏个原⽣js获取元素⼦节点的⽅法：
⼀、通过标签的属性值获取后代节点
以getElementBy开头的⽅法，可以根据具体的属性获取元素的后代节点。这些⽅法不只会获取⼦节点，他也会获取到所有符合条件的后代节点。
⽅法依据属性兼容性其他
getElementById id兼容性好，推荐使⽤如果存在多个id相同的元素，只会返回第⼀个
getElementsByTagName标签名不兼容ie8及以下版本 返回所有符合条件的元素的集合
getElementsByName name不兼容ie8及以下版本 返回所有符合条件的元素的集合
getElementsByClassName class不兼容ie8及以下版本返回所有符合条件的元素的集合
以getElementById为例，尽管有两个id为’Jan‘的元素，但是只会获取到第⼀个：
<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 ElementById('Jan');
console.log(j);
</script>
</html>
需要注意的是，在同⼀个⽂件中出现重复id是不符合规范的，应当尽量避免这样使⽤。
如果将上⾯代码中的getElementById('Jan')换成 getElementsByTagName('p')或者是
getElementsByClassName('test')将会获取到符合条件的结果集。
⼆、child属性
每个dom元素都是⼀个对象，在dom元素对象中有四个专门⽤于获取⼦元素的属性：
属性名作⽤其他
childNodes获取所有⼦节点不推荐使⽤，如果有空格，会作为⽂本节点获取到
child获取所有⼦节点推荐使⽤
firstChild获取⾸个⼦节点推荐使⽤
lastChild获取最后⼀个⼦节点推荐使⽤
这四个属性都不存在兼容性问题，除了childNodes之外都是⽐较好⽤的。
1. 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 = ElementById("test");
console.log(a.childNodes);
</script>
</html>
但是childNodes属性有⼀个问题，class=‘test’的div中只有3⼦节点，执⾏结果却有7个节点：
因为根据在⽹页中，标签之间的回车空格等特殊字符属于⼀个p元素，上⾯的div中输⼊了4个回车，因此会多出四个text节点：
要解决这个问题有两个⽅法：
⽅法⼀：去掉所有的回车空格等特殊字符，但是会影响程序的可读性和代码的规范。
⽅法⼆：动态过滤掉空⽩字符：
通过for循环遍历对象中的所有元素，删除纯⽂本元素。
完整的代码就是这样：
var a = ElementById("test");
var b = a.childNodes;
for(i=0;i<b.length;i++){
if(b[i].nodeName == "#text"&& !/\s/.deValue)){
}
}
第⼆种⽅法每次查询之前，都要先执⾏⼀段过滤代码。这样会影响程序的执⾏效率，因此childNodes属性不建议使⽤。
2. children
相⽐childNodes，children属性不会将空格作为⽂本节点获取。因此就不需要额外的去除空格操作，获取节点的⽅式和chlidNodes属性相同。
还是⽤上⾯的代码，将 a.childNodes 修改为 a.child 之后，会获取到三个p元素，这就是通常希望得到的结果。
chilren和childNodes属性存在的缺点是会获取全部的⼦节点，某些情况下使⽤时需要筛选，不够灵活。
3. firstChild&lastChild
firstChild会获取⾸个⼦节点，相当于children[0]的效果。
lastChild会获取最后⼀个⼦节点，相当于children[children.length-1]
三、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');
//通过伪类选择器获取⼦节点
原生js和js的区别document.querySelector('.first>span');
//确认selectAll批量获取节点
document.querySelectorAll('#second>div');
</script>
总体来说，我⽐较推荐使⽤querySelector⽅法，因为它更加灵活，使⽤作为css选择器进⾏选择⾮常⽅便。当然querySelector⽅法不只可以获取元素的⼦节点，它可以获取任何节点。querySelector⽅法可以兼容到IE8，基本能满⾜前端开发兼容性的需要。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。