知识点
  • 节点对象的遍历,一般使用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>
版权声明：本文为rowlet原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/rowlet/article/details/124773138