JavaScript DOM遍历

JavaScript DOM遍历是指通过JavaScript访问和操作文档对象模型（DOM）中节点（元素、文本、注释等）的过程。DOM遍历的核心是通过父子、兄弟等关系在节点间导航，从而动态修改页面结构或内容。本文将从基础概念到高级技巧全面介绍DOM遍历的方法和应用场景。

概述

DOM（Document Object Model）是HTML或XML文档的编程接口，它将文档表示为树状结构，每个节点对应文档的一部分（如元素、属性、文本）。JavaScript通过DOM API提供的方法（如`parentNode`、`childNodes`、`querySelector`等）实现节点遍历。

DOM树结构示例

graph TD A[document] --> B[html] B --> C[head] B --> D[body] C --> E[title] D --> F[h1] D --> G[div] G --> H[p] G --> I[p]

上图中，`document`是根节点，`html`是其子节点，`body`和`head`是兄弟节点，`div`包含两个子节点`p`。

基本遍历方法

1. 父子节点遍历

• `parentNode`：获取当前节点的父节点。
• `childNodes`：返回包含所有子节点的类数组对象（包括文本节点）。
• `firstChild` 和 `lastChild`：分别获取第一个和最后一个子节点。

  
// 示例：遍历子节点  
const div = document.querySelector('div');  
console.log(div.parentNode); // 输出父节点（如body）  
console.log(div.childNodes); // 输出所有子节点（NodeList）  
console.log(div.firstChild); // 第一个子节点（可能是文本节点）

2. 兄弟节点遍历

• `nextSibling` 和 `previousSibling`：分别获取下一个和上一个兄弟节点（包括文本节点）。
• `nextElementSibling` 和 `previousElementSibling`（推荐）：仅获取元素节点。

  
// 示例：遍历兄弟节点  
const firstP = document.querySelector('p');  
console.log(firstP.nextSibling); // 可能是文本节点（如换行符）  
console.log(firstP.nextElementSibling); // 下一个p元素

高级遍历方法

1. `querySelector` 和 `querySelectorAll`

通过CSS选择器快速定位节点：

  
// 获取第一个匹配的元素  
const header = document.querySelector('h1');  

// 获取所有匹配的元素（NodeList）  
const paragraphs = document.querySelectorAll('div p');

2. `Element` 特定属性

• `children`：仅返回元素子节点（忽略文本节点）。
• `firstElementChild` 和 `lastElementChild`：类似`firstChild`但仅针对元素节点。

实际应用案例

动态表格行操作

假设需要为表格的每一行添加点击事件并高亮当前行：

  
const rows = document.querySelectorAll('tr');  
rows.forEach(row => {  
    row.addEventListener('click', () => {  
        // 移除其他行的高亮  
        rows.forEach(r => r.style.backgroundColor = '');  
        // 高亮当前行  
        row.style.backgroundColor = 'yellow';  
    });  
});

递归遍历DOM树

递归打印所有节点名称和类型：

  
function traverseDOM(node, depth = 0) {  
    console.log(' '.repeat(depth * 2) + node.nodeName);  
    node.childNodes.forEach(child => traverseDOM(child, depth + 1));  
}  
traverseDOM(document.body);

性能优化建议

1. 避免频繁操作DOM（如循环内直接修改样式），可使用文档片段（`DocumentFragment`）批量处理。 2. 优先使用`querySelector`和`getElementById`等高效方法。 3. 缓存遍历结果（如将`querySelectorAll`的结果存入变量）。

总结

DOM遍历是JavaScript交互的核心技术之一。初学者应掌握基础父子/兄弟节点访问方法，进阶开发者可结合CSS选择器和递归实现复杂操作。实际开发中需注意性能优化，避免不必要的重绘和回流。