JavaScript中DOM操作获取标签对象

最新推荐文章于 2024-09-21 09:30:15 发布

大聪明码农徐

最新推荐文章于 2024-09-21 09:30:15 发布

阅读量512

点赞数 3

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

本文链接：https://blog.csdn.net/qq_45799465/article/details/122763193

版权

JavaScript基础专栏收录该内容

34 篇文章 18 订阅

订阅专栏

本文详细讲解了JavaScript中querySelector和querySelectorAll方法的区别，包括获取单个元素与多个元素的方式，以及如何正确处理返回的伪数组。通过实例演示了这两种选择器在实际应用中的使用和操作方式。

摘要由CSDN通过智能技术生成

var 变量 = document.querySelector('条件')

获取整个HTML文档中第一个符合条件的标签对象，是一个独立的标签对象可以直接进行DOM操作，如果没有符合条件的对象执行结果是null

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var oDiv = document.querySelector('div');
        console.log(oDiv);
    </script>
</body>

运行结果：

var 变量 = docunment.querySelectorALL('条件')

获取符合条件的所有标签对象，执行结果是一个伪数组，不能直接进行操作，必须伪数组[索引下标] 再进行操作。如果没有符合条件的标签对象返回值为空伪数组

DOM操作不能直接操作标签对象伪数组

必须伪数组[索引下标] 获取一个独立的标签对象进行DOM操作

循环遍历伪数组获取每一个独立的标签对象进行 DOM操作

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // 获取符合条件的所有标签对象
        var oDivs = document.querySelectorAll('div');
        // 结果为伪数组
        console.log(oDivs);
        // 伪数组[索引下标] 获取一个独立的标签对象 进行DOM操作
        console.log(oDivs[0]);
        console.log(oDivs[1]);
        console.log(oDivs[2]);
        console.log(oDivs[3]);
    </script>
</body>

运行结果：