如何使用JavaScript计算特定元素的所有子元素数量

如何使用JavaScript计算特定元素的所有子元素数量

给定一个包含一些嵌套元素的HTML文档,任务是计算特定元素的所有子元素的数量。使用JavaScript计算特定元素的所有子元素数量非常简单。例如:如果您有一个包含许多子元素的父元素,那么您可以使用 HTML DOM childElementCount属性 来计算特定元素的所有子元素的数量。

语法

node.childElementCount
HTML

示例:

<h1 style="color:green">GeeksforGeeks</h1>
  
<h3>
    点击按钮以计算所有<br>
    子元素的div元素
</h3>
  
<h5>计算<ul>元素的所有子元素数量</h5>
<ul id="parentID">
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
</ul>
  
<button onclick="myGeeks()">
    点击这里!
</button>
  
<h5 id="GFG"></h5>
  
<script>
    // This function count the child elements
    function myGeeks() {
        var count = document.getElementById(
            "parentID").childElementCount;
      
        document.getElementById("GFG").innerHTML
            = "总子节点数量: "
            + count;
    }
</script>
HTML

输出结果:

如何使用JavaScript计算特定元素的所有子元素数量

如何使用JavaScript计算特定元素的所有子元素数量?

阅读更多:JavaScript 教程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册