参考资料

1. HTML DOM 返回和设置链接的charset属性实例
2. HTML DOM弹出下拉列表中所有选项
3. HTML DOM获得下拉列表的选项数量
4. HTML DOM 返回image的name
5. HTML DOM添加表格中的行
6. HTML DOM 打开输出流，向流中输入文本实例
7. HTML DOM 改变链接的target属性实例
8. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例

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 处理文本内容