参考资料

1. HTML DOM 返回一个链接的type属性的值实例
2. HTML DOM 返回图像映射某个区域的替代文字实例
3. HTML DOM 给image加上border
4. HTML DOM 返回一个表单的name 实例
5. HTML DOM 返回加载的当前文档的URL实例
6. HTML DOM 用指定的Name弹出元素的数量实例
7. HTML DOM 返回文档的最后一次修改时间 实例
8. HTML DOM 返回一个button的value 实例

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。