做题的时候碰见了关于 childNodes 和 children之间的区别的问题,查了一点点资料,对他们二者之间也有了一些了解,写博客加深一下自己的印象.
二者的定义:
childNodes: 返回包含指定节点的子节点的集合，该集合为即时更新的集合children : 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection,属于非标准型，不过它还是依旧可以被所有的浏览器所支持用下面的一段代码来展示二者之间具体的区别: childNodes的结果:
<ul id ='list'> <li>111</li> <li>222</li> <li>333</li> </ul> <script> let oul = document.getElementById('list'); let olis = oul.childNodes; console.log(olis.length); console.log(olis); </script>打印结果如下图: 在我们的认识中,这里难道不应该打印3吗?他为啥打印了7呢,因为Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。
我们具体来看看到到时为啥会打印7呢? childNodes 获取的是元素所有的子节点.
childrem 打印情况:
let oul = document.getElementById('list'); let olis = oul.children; console.log(olis.length); console.log(olis);打印的结果如下: children 用来获取所有的子元素,所以打印的结果是 3. children不需要去计算空格所占的节点
获取标签里面的内容值需要通过下标获取对应的元素,然后获取元素中的内容即可:
console.log(oul.childNodes[3].innerHTML); console.log(oul.children[1].innerHTML);得到的结果实现相同的,如下图:
for(let i = 0 ; i < olis.length ; i++) { if (oul.childNodes[i].nodeType == 1) { // nodes.childNodes[i] 是元素节点 console.log(`${i}是元素节点`); }else if(oul.childNodes[i].nodeType == 2) { console.log(`${i}是属性节点`); }else { console.log(`${i}是文本节点`); } }不建议使用childNodes方法。 硬要使用这个方法，可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。因此我们做如下判断:
for(let i = 0 ; i < olis.length ; i++) { if (oul.childNodes[i].nodeType == 1) { // nodes.childNodes[i] 是元素节点 console.log(`${i}是元素节点`); }else if(oul.childNodes[i].nodeType == 2) { console.log(`${i}是属性节点`); }else { console.log(`${i}是文本节点`); } }和 childNodes 方法相比,更推荐使用 children方法.
