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

列印頁面