新闻中心 NEWS CENTER

什么是j*ascript树结构_如何遍历DOM树？

2025-12-14

浏览次数：次

J*aScript中的“树结构”指DOM这种分层数据组织方式，以document为根节点，HTML元素按父子、兄弟关系嵌套构成树；常用遍历法包括childNodes/children、parentNode、next/previousElementSibling、querySelector及递归DFS与队列BFS。

什么是javascript树结构_如何遍历dom树？

J*aScript 中的“树结构”指的是一种分层的数据组织方式，DOM（文档对象模型）就是典型的树结构——网页的 HTML 元素以父子、兄弟关系嵌套连接，形成一棵从 document 根节点出发的树。

DOM 树长什么样？

比如这段 HTML：

标题

一段文字

列表项 1

列表项 2

它对应的 DOM 树根是 document，#app 是它的子节点（通常为 document.body 或 document.documentElement 的直接子元素），h1、p、ul 是 #app 的子节点，li 又是 ul 的子节点……逐层向下，构成清晰的父子层级。

常用遍历 DOM 树的方法

遍历不等于“操作”，而是按某种顺序访问每个节点。DOM 提供了多种原生方式：

childNodes / children：获取某节点的全部子节点（含文本、注释等）或仅元素子节点（children 更常用）
parentNode：向上找父节点，直到 document 或 null
nextSibling / previousSibling：找同级的下一个/上一个节点（注意可能拿到空白文本节点）
→ 更安全用 nextElementSibling 和 previousElementSibling
querySelector / querySelectorAll：用 CSS 选择器“跳着查”，适合目标明确的查找，不算严格意义上的遍历，但很实用

递归遍历：深度优先（DFS）

这是最贴近“树遍历本质”的写法，从根开始，先处理当前节点，再递归处理所有子元素：

function tr*erse(node) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    console.log(node.tagName); // 只处理元素节点
  }
  for (let child of node.children) {
    tr*erse(child);
  }
}
tr*erse(document.body);