JS获取div里面的其它元素的两种方法

渡湫..2023-08-02 17:13

通过JS的DOM获取div里面的其它元素的两种方法 getElementsByTagName 和 querySelector ，具体使用方法如下：

html 复制代码

<div id="box">
        <input type="text" id="h1" value="h1">
        <input type="text" id="h2" value="h2">
</div>

getElementsByTagName的获取方式：

javascript 复制代码

<script>
        var box = document.getElementById('box')
        var input = box.getElementsByTagName('input')[0];
        input.style.backgroundColor = 'pink'
</script>

这里的（'input')[0] 因为getElementsByTagName获取的是一个伪数组集合，不能直接注册事件，必须要提取单个元素才可以，[0] 是索引号。效果图如下：

如果可以改为 [1] 就是 h2 改变背景，如果需要获取所有的input，可以用循环

javascript 复制代码

var box = document.getElementById('box')
var input = box.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
      input[i].style.backgroundColor = 'pink'
}

querySelector的获取方式：

javascript 复制代码

var input = document.querySelector('#box input')
input.style.backgroundColor = 'pink';

这种方法是实际开发中常用的方法，比较严谨一些，不过 querySelector 只能获取第一个，如果想要获取全部可以使用：

javascript 复制代码

var input = document.querySelectorAll('input')
for (var i = 0; i < input.length; i++) {
     input[i].style.backgroundColor = 'pink'
}

注意：getElementsByTagName、getElementsByClassName、getElementsByName、querySelectorAll 获取的都是伪数组集合，都不能直接注册事件，需要在后面加上索引