HTML DOM 根节点childNodes 和 nodeValue

HTML DOM 根节点 childNodes 和 nodeValue

根节点 childNodes

介绍

childNodes 属性返回包含指定节点的子节点的集合，是一个 NodeList 对象。

标签

无特定标签，适用于所有HTML元素

用法

element.childNodes

实例

<div id="parent">
  <p>Paragraph 1</p>
  Text node
  <!-- Comment node -->
  <p>Paragraph 2</p>
</div>

<script>
  const parent = document.getElementById('parent');
  const children = parent.childNodes;
  console.log(children.length); // 输出：7（包含文本节点和注释节点）
</script>

功能

• 返回所有子节点，包括元素节点、文本节点和注释节点

• 返回的 NodeList 是动态的，会随DOM变化自动更新

• 包含空白文本节点（在某些浏览器中）

nodeValue

介绍

nodeValue 属性返回或设置当前节点的值。

标签

适用于文本节点、注释节点和属性节点

用法

node.nodeValue
node.nodeValue = newValue

实例

<p id="demo">Hello World</p>

<script>
  const x = document.getElementById("demo").childNodes[0];
  x.nodeValue = "New text!";
</script>

功能

• 对于文本节点，返回或设置文本内容

• 对于注释节点，返回或设置注释内容

• 对于属性节点，返回或设置属性值

• 对于元素节点，返回 null

CSS 扩展

选择特定节点类型

/* 选择所有元素节点 */
* {
  /* 样式规则 */
}

/* 选择文本节点（无法直接通过CSS选择） */
/* 需要通过JavaScript间接操作 */

示例说明

<div id="container">
  <p>First paragraph</p>
  Some text
  <p>Second paragraph</p>
</div>

<script>
  const container = document.getElementById('container');
  
  // 使用childNodes遍历所有子节点
  container.childNodes.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE) {
      console.log('Element:', node.tagName);
    } else if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '') {
      console.log('Text:', node.nodeValue);
      // 修改文本节点内容
      node.nodeValue = 'Modified text';
    }
  });
</script>

注意事项

1. childNodes 包含所有类型的节点，包括空白文本节点

2. 使用 nodeValue 前应先检查节点类型

3. 元素节点的 nodeValue 始终为 null

4. 现代浏览器推荐使用 textContent 替代 nodeValue 处理文本内容