querySelectorAll()和getElementsByTagName()的区别

最新推荐文章于 2024-05-03 11:55:44 发布

一只特仑苏

最新推荐文章于 2024-05-03 11:55:44 发布

阅读量469

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/m0_61892085/article/details/123954760

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

`querySelectorAll()`和`getElementsByTagName()`的区别

querySelectorAll()方法获取到NodeList对象，是静态的集合，getElementsByTagName()方法获取到HTMLCollection对象，是动态的集合。

	querySelectorAll()	getElementsByTagName()
返回值类型	NodeList集合	HTMLCollection集合
返回值状态	静态	动态

querySelectorAll()查询的是执行时的DOM结构。如果后续DOM结构后续的结构发生改变，他所查询的结构仍然不会变。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var myul = document.querySelector("ul");
        var myli = document.querySelectorAll("li");

        console.log(myli.length); //5

        var newli = document.createElement("li");
        myul.appendChild(newli);

        console.log(myli.length); //5，页面DOM结构虽然发生了改变，但是长度并没有发生改变，是静态的
    </script>
</body>

getElementsByTagName()获取页面的DOM结构，如果后续DOM结构后续的结构发生改变，他获取的结构也随之改变。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var myul = document.querySelector("ul");
        var myli = document.getElementsByTagName("li");

        console.log(myli.length); //5

        var newli = document.createElement("li");
        myul.appendChild(newli);

        console.log(myli.length); //6，页面DOM结构然发生了改变,长度也随之变化
    </script>
</body>