2022-05-15 获取节点:getElementsByTagName和querySelectorAll的异同

前端OnTheRun

已于 2022-05-16 23:16:19 修改

阅读量236

点赞数 1

分类专栏：笔记文章标签： javascript 前端 DOM js

于 2022-05-15 14:45:35 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/124773138

版权

笔记专栏收录该内容

82 篇文章 1 订阅

订阅专栏

知识点

节点对象的遍历,一般使用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>

前端OnTheRun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
2022-05-15 获取节点:getElementsByTagName和querySelectorAll的异同

知识点节点对象的遍历,一般使用forEach输出结果为NodeLIst才可以直接遍历相同点都是伪数组,只有长度和下标,不能使用数组方法,比如数组方法push()等等不同点getElementsByTagName获取的节点,console.log()输出的是(节点列表)NodeLIst(3)[li,li,li],需要通过Array.from转化成真数组才能进行节点遍历querySelectorAll获取的节点,console.log()输出的是(节点集合)HTMLcollection(3)
复制链接

扫一扫