HTML - DOM 元素 childElementCount 属性

HTML DOM 中的 **childElementCount** 属性返回指定元素的直接子元素的数量。它类似于 children.length。它是只读的，通常用于管理动态内容和布局调整。

语法

element.childElementCount;

返回值

此属性返回一个整数，表示直接子元素的数量。

HTML DOM 'childElementCount' 属性的示例

以下是一些示例，说明了在各种场景中 childElementCount 属性的使用。

计算直接子元素

此示例帮助我们了解如何在网页上动态计算 <div> 的直接子元素数量并显示计数。

<!DOCTYPE html>
<html lang="en">

<head> 
  <style>
    .container {
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">childElementCount Property
    <br><br>Counting Direct Child Element
    </h3>
  <div class="container" id="parentDiv">
    <h2>Parent Div</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
    </ul>
  </div>

  <button onclick="countChildElements()">
  Count Child Elements
  </button>
  <p id="result"></p>

  <script>
    function countChildElements() {

      let parentDiv = document.getElementById
      ('parentDiv');
      let childElements = parentDiv.children.length;
      document.getElementById('result').textContent = 
      `Number of direct child elements:${childElements}`;
    }
  </script>
</body>

</html>

检查元素是否包含子元素

此示例允许我们通过点击“检查子元素”按钮动态检查元素是否包含子元素，并相应地更新消息。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
    .container {
        margin: 20px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">childElementCount Property
    <br><br>Checking if an element has Child Elements
    </h3>
    <div class="container" id="parentDiv">
    <h2>Parent Div</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
    </div>

    <button onclick="checkChildElements()">
        Check Child Elements
    </button>
    <p id="result"></p>

    <script>
    function checkChildElements() {

        let parentDiv = document.getElementById
        ('parentDiv');
        if (parentDiv.hasChildNodes()) {
        document.getElementById('result').textContent = 
        'The parentDiv has child elements.';
        } else {
        document.getElementById('result').textContent = 
        'The parentDiv does not have child elements.';
        }
    }
    </script>
</body>

</html>

使用 childElementCount 和循环

此示例允许点击“遍历子元素”按钮，该按钮检索并显示 'id = parentDiv' 的 div 内每个子元素的信息。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
    .container {
        margin: 20px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">childElementCount Property
    <br><br>Using childElementCount and Loop 
    </h3>
    
    <div class="container" id="parentDiv">
    <h2>Parent Div</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
    </div>

    <button onclick="loopThroughChildElements()">
    Loop Through Child Elements
    </button>
    <p id="result"></p>

    <script>
    function loopThroughChildElements() {

        let parentDiv = 
        document.getElementById('parentDiv');
        let childCount = 
        parentDiv.childElementCount;
        let result = '';

        for (let i = 0; i < childCount; i++) {
        let childElement = parentDiv.children[i];
        result += `${childElement.tagName}: 
        ${childElement.textContent}<br>`;
        }

        document.getElementById('result').innerHTML = 
        result;
    }
    </script>
</body>

</html>

支持的浏览器

属性
childElementCount	是 1.0	是 12	是 1.0	是 3.1	是 9.5

html_dom_element_reference.htm

打印页面