querySelectorAll和getElementsByClassName获取元素的区别

最新推荐文章于 2024-04-15 11:18:20 发布

小新大人y

最新推荐文章于 2024-04-15 11:18:20 发布

阅读量1.1k

点赞数 4

分类专栏： js 文章标签： querySelectorAll和getElementsByClass getElementsByClass获取元素 querySelectorAll获取元素 HTMLCollection NodeList

本文链接：https://blog.csdn.net/qq_44885374/article/details/91807435

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

querySelectorAll和getElementsByClassName获取元素的区别

querySelectorAll()方法是HTML5新增的方法，通过传入一个css选择符，返回所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例，
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为HTMLCollection对象。
HTMLCollection对象代表一个有顺序的节点列表。HTMLCollection对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。
querySelectorAll和getElementsByClassName获取元素最大的区别就是querySelectorAll的实现类似于一组元素的快照，而并非对文档结构进行搜索的动态查询。所谓快照就是把某个时刻dom中的结构记录下来，而不是通过查询dom结构动态获取。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题，但是也会带来新的问题，比如dom结构发生变化，这个选择器就无法使用了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<script>
    window.onload=function(){
        var block=document.querySelectorAll(".block");
        document.body.innerHTML+='<div class="block"></div>';
        console.log(block.length);
        for(var i=0;i<block.length;i++){
            block[i].style.background="red";
        }
    }
</script>
</body>
</html>

在这里插入图片描述
如上图所示：在原来的dom中有5个div通过document.querySelectorAll进行获取，但是如果我们再给body增加一个新的dom结点，那么对这个block列表中元素进行操作，会发现没有效果，console.log(block.length)的值是5，这是因为querySelector得到的是一个静态列表，它不会对domj结构进行动态查询，再次重新获取。相反，document.getElementsByClassName是动态查询的过程，会随着dom结构的变化，得到的结点列表也会发生变化。再对这个block列表中元素进行操作，就有效果了
如下图所示：通过getElementsByClassName获取的是动态列表，可以随着dom结构的变化而变化。
console.log(block.length)的值就是6。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<script>
    window.onload=function(){
            var block=document.getElementsByClassName("block");
            document.body.innerHTML+='<div class="block"></div>';
            console.log(block.length);
            for(var i=0;i<block.length;i++){
                block[i].style.background="red";
            }
    }
</script>
</body>
</html>

在这里插入图片描述

小新大人y

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
querySelectorAll和getElementsByClassName获取元素的区别

querySelectorAll和getElementsByClassName获取元素的区别querySelectorAll()方法是HTML5新增的方法，通过传入一个css选择符，返回所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例，getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为HTMLCollection对象。HT...
复制链接

扫一扫