DOM 遍历学习笔记

什么是 DOM 遍历？

DOM（文档对象模型）是表示 HTML 和 XML 文档的标准方式。在浏览器中，DOM 是由节点树来表示的。DOM 遍历是指遍历节点树的过程，以访问和操作节点。

如何进行 DOM 遍历？

可以使用 JavaScript 提供的 DOM API 进行遍历。

1. 访问子节点

可以使用 childNodes 属性访问元素的子节点。该属性返回一个节点列表，其中包含所有的子节点。

javascriptCopy Code
const parent = document.querySelector('#parent');
const children = parent.childNodes;

children.forEach((child) => {
  // 对每个子节点进行操作
});

2. 访问父节点

可以使用 parentNode 属性访问元素的父节点。

javascriptCopy Code
const child = document.querySelector('#child');
const parent = child.parentNode;

3. 访问兄弟节点

可以使用 previousSibling 和 nextSibling 属性访问同级节点。

javascriptCopy Code
const sibling = document.querySelector('#sibling');
const previousSibling = sibling.previousSibling;
const nextSibling = sibling.nextSibling;

4. 使用 querySelector 进行遍历

可以使用 querySelector 方法遍历 DOM 树。该方法返回符合条件的第一个元素。

javascriptCopy Code
const element = document.querySelector('#element');

实例

以下是一个实例，演示如何使用 DOM 遍历访问子节点并修改它们的文本内容。

htmlCopy Code
<div id="parent">
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <p>这是第三个段落。</p>
</div>

javascriptCopy Code
const parent = document.querySelector('#parent');
const children = parent.childNodes;

children.forEach((child) => {
  if (child.nodeName === 'P') {
    child.textContent = '这是修改后的文本';
  }
});

上述代码会将 #parent 元素下所有 p 元素的文本内容修改为 这是修改后的文本。