知识点
- 节点对象的遍历,一般使用forEach
- 输出结果为NodeLIst才可以直接遍历
相同点
都是伪数组,只有长度和下标,不能使用数组方法,比如数组方法push()等等
不同点
- getElementsByTagName获取的节点,console.log()输出的是(节点列表)
NodeLIst(3)[li,li,li]
,需要通过Array.from转化成真数组才能进行节点遍历 - querySelectorAll获取的节点,console.log()输出的是(节点集合)
HTMLcollection(3)[li,li,li]
,它是ES5中新增的节点获取方法,可以直接调用forEach
验证
<body>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</body>
<script>
var lisObj1 = document.querySelectorAll('li');
var lisObj2 = document.getElementsByTagName('li');
console.log(lisObj1, lisObj2);
lisObj1.forEach(function(v, k) {
console.log(v);//<li>link</li><li>link</li><li>link</li>
});
//伪数组转化为真数组Array.from
Array.from(lisObj2).forEach(function(v, k) {
console.log(v);//<li>link</li><li>link</li><li>link</li>
})
</script>