querySelector 和 getElementById 之间的区别

最新推荐文章于 2024-08-22 09:57:36 发布

嘎嘎弱

最新推荐文章于 2024-08-22 09:57:36 发布

阅读量218

点赞数 1

分类专栏：前端基础知识文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_75203410/article/details/129916718

版权

前端基础知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在编写js代码的过程中，我们需要获取dom元素，而获取dom元素有许多种办法，例如：querySelector 和 getElementById、 getElementByClassname、getElementByTagname，那这类办法有什么区别呢？

在文档中的描述：

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。！！！注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 [NodeList] 对象。
[document.getElementsByClassName()]：返回文档中所有指定类名的元素集合，作为 NodeList 对象。

[document.getElementById()]：返回对拥有指定 id 的第一个对象的引用。
[document.getElementsByName()]：返回带有指定名称的对象集合。
[document.getElementsByTagName()]：返回带有指定标签名的对象集合

在文档的描述中，这两种方法在使用上的区别好像看不出来，而且自己敲代码的时候获得的元素也没有什么不一样的。但是实际上是有差别的，差别在于：query选择符选择出来的元素以及元素数组是静态的，而getElement这种方法选择出来的元素及元素数组是动态的。那到底什么是静态？什么是动态呢？

大家可以自己去敲一下下面这段代码：

<body>
    <div id="difference">
        <p v-model="aa">你来试试就知道了</p>
        <p>你来试试就知道了</p>
    </div>

    <script>
        var querySelector = document.querySelector('#difference')
        var getElementById = document.getElementById('difference')
        console.log(querySelector === getElementById) // true
        var querySelectorAll = document.querySelectorAll('p')
        for(let i=0;i < querySelectorAll.length;i++){
            querySelector.appendChild(document.createElement('p'))
        }
        console.log(querySelectorAll.length) 
        //值为2,动态添加元素并没有使querySelectorAll发生变化
        var getElementsByTagName = document.getElementsByTagName('p')
        for(let i=0;i < 3;i++){
            getElementById.appendChild(document.createElement('p'))
        }
        console.log(getElementsByTagName.length) 
        //值为4+3=7,每次动态添加元素都使getElementsByTagName发生了变化
    </script>
</body>

理解完这段代码之后

大家应该就可以明白：什么是静态、什么是动态、以及querySelector 和 getElementById 之间的区别了。