您的位置：首页 > Web前端 > JavaScript

JavaScript获取某个元素节点的所有子元素节点标签

2018-02-08 16:28 519 查看
　如果是要使用JavaScript的document对象自带的方法来实现时，那么最重要的就是getElementByTagName()。

　　getElementByTagName()这个方法支持通配符“*”，所以利用这个特性，先利用getElementById或者getElementsByClassName来找到一个元素节点，返回的是一个DOM的对象，然后利用这个对象的getElementsByTagName来实现获取它所有的子元素，包括子一代，子二代....一直到最深的那一层

　　getElementByTagName()返回的是一个数组，可使用length来查看子元素节点的数量。

下面是一个例子：

<body>
<div id="level_1">
<div class="div_1">
<div>aaaaaaaa</div>
</div>
<div class="div_2">
<div>
<div>bbbbbbbb</div>
</div>
<span>cccccccccccc</span>
</div>
</div>
</body>
<script>
//获取id为level_1的div节点的子节点元素
var div = document.getElementById("level_1");
var items = div.getElementsByTagName("*");
console.log(items.length); //显示6

//获取class为div_2的div节点的子节点元素
div = document.getElementsByClassName("div_2")[0];
items = div.getElementsByTagName("*");
console.log(items.length); //显示3
</script>


　　

　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航