HTML - DOM 元素 childNodes 屬性

在 HTML DOM 中，**childNodes** 屬性檢索元素的所有子節點，包括元素、文字節點和註釋。這是一個只讀屬性，通常用於內容操作。

與 childElementCount 不同，它涵蓋所有型別的子節點。

語法

element.childNodes;

返回值

此屬性返回一個 NodeList，其中包含指定元素的所有子節點。

HTML DOM 元素 'childNodes' 屬性示例

以下是一些顯示 HTML DOM 中 childNodes 屬性用法的示例。

計算並顯示子節點數量

此示例顯示了 childNodes 屬性的基本用法，用於動態計算和顯示子元素的數量。以下程式碼包含一個按鈕，用於計算和顯示'父' div 內的子元素（'<p>' 和 '<div>'）的數量。

<!DOCTYPE html>
<html>
<head>
  <title>Child Nodes Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>ChildNodes Property</h2>

  <div id="parent">
    <p>This is a parent paragraph.</p>
    <div>
        <p>This is a nested paragraph.</p>
        <span>This is a nested span element.</span>
      </div>
  </div>

  <button onclick="countChildNodes()">
    Count Child Nodes
  </button>

  <div id="output"></div>

  <script>
    function countChildNodes() {
      const count = document.getElementById
      ('parent').querySelectorAll('*').length;
      document.getElementById('output').textContent = 
      `Number of child elements: ${count}`;
    }
  </script>  
</body>

</html>

修改子節點

此示例顯示如何使用 childNodes 屬性來修改 HTML 元素內的子節點。以下程式碼包含一個按鈕，用於移除最初的 <p> 段落，並動態地向 'parent' 新增一個新的 <h2> 標題。

<!DOCTYPE html>
<html lang="en">
<head>  
  <title>Modifying Child Nodes</title>
</head> 

<body>
  <h1>HTML - DOM Element</h1>
  <h2>childNodes property</h2>
  <p>Click the button to modify child nodes.</p>

  <div id="parent">
    <p>This is a paragraph.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <span>Another child</span>
  </div>

  <button onclick="modifyChildNodes()">
      Modify Child Nodes
  </button>

  <script>
    function modifyChildNodes() {
      const parentElement = 
      document.getElementById('parent');
      const firstChild = parentElement.childNodes[0];  
      parentElement.removeChild(firstChild); 

      const newElement = document.createElement('h2');
      newElement.textContent = 'New Heading';
      parentElement.appendChild(newElement); 
    }
  </script>
</body>

</html>

使用 'childNodes' 屬性訪問子節點

此示例顯示如何使用 childNodes 屬性訪問和顯示有關 id 為 "parent" 的 <div> 元素內子節點（<p> 元素和 <span> 元素）的資訊。

<!DOCTYPE html>
<html>
<head>
  <title>ChildNodes Property Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>ChildNodes Property </h2> 
  <p>It displays the parent node's child nodes</p>
  <p>Whitespace between elements are text nodes.</p>
  <div id="parent">
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <span>This is a span element.</span>
  </div>
  
  <button onclick="displayChildNodes()">
      Display Child Nodes
  </button>

  <div id="output"></div>

  <script>
    function displayChildNodes() {
      const parent = document.getElementById('parent');
      const childNodes = parent.childNodes;

      let res = "<p><strong>Child Nodes:</strong></p>";
      childNodes.forEach(node => {
        res+=`<p>${node.nodeName}-${node.nodeType}</p>`;
      });

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

</html>

動態新增和移除子節點

此示例幫助我們理解如何動態地使用 childNodes 屬性來新增和移除子節點。以下程式碼透過點選“新增”按鈕新增一個包含新內容的新 <p> 節點，並透過點選“移除”按鈕移除最後一個子節點。

<!DOCTYPE html>
<html>
<head>
  <title>Manipulating Child Nodes</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>childNodes Property</h2>
  <h2>Manipulating Child Nodes</h2>
  <div id="container">
    <p>This is the first paragraph.</p>
    <span>This is a span element.</span>
  </div>

  <button onclick="addNewNode()">Add New Node</button>
  <button onclick="removeLastNode()">
      Remove Last Node
  </button>

  <div id="output"></div>

  <script>
    const container=document.getElementById('container');

    function addNewNode() {
      container.innerHTML+= 
      '<p>This is a new paragraph added dynamically.</p>';
      updateOutput();
    }

    function removeLastNode() {
      const childNodes = container.children;
      if (childNodes.length > 0) {
        container.removeChild(container.lastElementChild);
        updateOutput();
      }
    }

    function updateOutput() {
      const childNodes = container.children;

      let res = 
      "<p><strong>Current Child Nodes:</strong></p>";
      Array.from(childNodes).forEach(node => {
        res+=`<p>${node.nodeName}:${node.textContent}</p>`;
      });

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

</html>

支援的瀏覽器

屬性
childNodes	是	是	是	是	是

html_dom_element_reference.htm

列印頁面