JavaScript中DOM操作获取标签对象-CFANZ编程社区

JavaScript中DOM操作获取标签对象

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>

运行结果：

0 条评论