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

打印页面