JS获取div里面的其它元素的两种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS获取div里面的其它元素的两种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

getElementsByTagName的获取方式：

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

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

js获取div下的子元素,javascript,前端,html

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

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

js获取div下的子元素,javascript,前端,html

querySelector的获取方式：

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

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

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

注意：getElementsByTagName、getElementsByClassName、getElementsByName、querySelectorAll 获取的都是伪数组集合，都不能直接注册事件，需要在后面加上索引文章来源地址https://www.toymoban.com/news/detail-551379.html

到了这里，关于JS获取div里面的其它元素的两种方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！