做题的时候碰见了关于 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 Explore
r 会忽略节点之间生成的空白文本节点(比如换行字符),而 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
方法.