跳转到内容
主菜单
主菜单
移至侧栏
隐藏
导航
首页
最近更改
随机页面
MediaWiki帮助
代码酷
搜索
搜索
中文(中国大陆)
外观
创建账号
登录
个人工具
创建账号
登录
未登录编辑者的页面
了解详情
贡献
讨论
编辑“︁
JavaScript DOM遍历
”︁
页面
讨论
大陆简体
阅读
编辑
编辑源代码
查看历史
工具
工具
移至侧栏
隐藏
操作
阅读
编辑
编辑源代码
查看历史
常规
链入页面
相关更改
特殊页面
页面信息
外观
移至侧栏
隐藏
您的更改会在有权核准的用户核准后向读者展示。
警告:
您没有登录。如果您进行任何编辑,您的IP地址会公开展示。如果您
登录
或
创建账号
,您的编辑会以您的用户名署名,此外还有其他益处。
反垃圾检查。
不要
加入这个!
{{DISPLAYTITLE:JavaScript DOM遍历}} '''JavaScript DOM遍历'''是指通过JavaScript访问和操作文档对象模型(DOM)中节点(元素、文本、注释等)的过程。DOM遍历的核心是通过父子、兄弟等关系在节点间导航,从而动态修改页面结构或内容。本文将从基础概念到高级技巧全面介绍DOM遍历的方法和应用场景。 == 概述 == DOM(Document Object Model)是HTML或XML文档的编程接口,它将文档表示为树状结构,每个节点对应文档的一部分(如元素、属性、文本)。JavaScript通过DOM API提供的方法(如`parentNode`、`childNodes`、`querySelector`等)实现节点遍历。 === DOM树结构示例 === <mermaid> 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] </mermaid> 上图中,`document`是根节点,`html`是其子节点,`body`和`head`是兄弟节点,`div`包含两个子节点`p`。 == 基本遍历方法 == === 1. 父子节点遍历 === * '''`parentNode`''':获取当前节点的父节点。 * '''`childNodes`''':返回包含所有子节点的类数组对象(包括文本节点)。 * '''`firstChild`''' 和 '''`lastChild`''':分别获取第一个和最后一个子节点。 <syntaxhighlight lang="javascript"> // 示例:遍历子节点 const div = document.querySelector('div'); console.log(div.parentNode); // 输出父节点(如body) console.log(div.childNodes); // 输出所有子节点(NodeList) console.log(div.firstChild); // 第一个子节点(可能是文本节点) </syntaxhighlight> === 2. 兄弟节点遍历 === * '''`nextSibling`''' 和 '''`previousSibling`''':分别获取下一个和上一个兄弟节点(包括文本节点)。 * '''`nextElementSibling`''' 和 '''`previousElementSibling`'''(推荐):仅获取元素节点。 <syntaxhighlight lang="javascript"> // 示例:遍历兄弟节点 const firstP = document.querySelector('p'); console.log(firstP.nextSibling); // 可能是文本节点(如换行符) console.log(firstP.nextElementSibling); // 下一个p元素 </syntaxhighlight> == 高级遍历方法 == === 1. `querySelector` 和 `querySelectorAll` === 通过CSS选择器快速定位节点: <syntaxhighlight lang="javascript"> // 获取第一个匹配的元素 const header = document.querySelector('h1'); // 获取所有匹配的元素(NodeList) const paragraphs = document.querySelectorAll('div p'); </syntaxhighlight> === 2. `Element` 特定属性 === * '''`children`''':仅返回元素子节点(忽略文本节点)。 * '''`firstElementChild`''' 和 '''`lastElementChild`''':类似`firstChild`但仅针对元素节点。 == 实际应用案例 == === 动态表格行操作 === 假设需要为表格的每一行添加点击事件并高亮当前行: <syntaxhighlight lang="javascript"> const rows = document.querySelectorAll('tr'); rows.forEach(row => { row.addEventListener('click', () => { // 移除其他行的高亮 rows.forEach(r => r.style.backgroundColor = ''); // 高亮当前行 row.style.backgroundColor = 'yellow'; }); }); </syntaxhighlight> === 递归遍历DOM树 === 递归打印所有节点名称和类型: <syntaxhighlight lang="javascript"> function traverseDOM(node, depth = 0) { console.log(' '.repeat(depth * 2) + node.nodeName); node.childNodes.forEach(child => traverseDOM(child, depth + 1)); } traverseDOM(document.body); </syntaxhighlight> == 性能优化建议 == 1. 避免频繁操作DOM(如循环内直接修改样式),可使用文档片段(`DocumentFragment`)批量处理。 2. 优先使用`querySelector`和`getElementById`等高效方法。 3. 缓存遍历结果(如将`querySelectorAll`的结果存入变量)。 == 总结 == DOM遍历是JavaScript交互的核心技术之一。初学者应掌握基础父子/兄弟节点访问方法,进阶开发者可结合CSS选择器和递归实现复杂操作。实际开发中需注意性能优化,避免不必要的重绘和回流。 {{Collapsible toggle|collapsed=true|title=扩展阅读|content= * **Node类型**:DOM节点共有12种类型,常见的有`ELEMENT_NODE`(1)和`TEXT_NODE`(3)。 * **TreeWalker API**:高级遍历工具,支持过滤特定类型节点。 }} [[Category:编程语言]] [[Category:JavaScript]] [[Category:Javascript DOM]]
摘要:
请注意,所有对代码酷的贡献均被视为依照知识共享署名-非商业性使用-相同方式共享发表(详情请见
代码酷:著作权
)。如果您不希望您的文字作品被随意编辑和分发传播,请不要在此提交。
您同时也向我们承诺,您提交的内容为您自己所创作,或是复制自公共领域或类似自由来源。
未经许可,请勿提交受著作权保护的作品!
取消
编辑帮助
(在新窗口中打开)
该页面使用的模板:
模板:Collapsible toggle
(
编辑
)