JavaScript中的“树结构”指DOM这种分层数据组织方式，以document为根节点，HTML元素按父子、兄弟关系嵌套构成树；常用遍历法包括childNodes/children、parentNode、next/previousElementSibling、querySelector及递归DFS与队列BFS。
JavaScript 中的“树结构”指的是一种分层的数据组织方式，DOM（文档对象模型）就是典型的树结构——网页的 HTML 元素以父子、兄弟关系嵌套连接，形成一棵从 document 根节点出发的树。
DOM 树长什么样？
比如这段 HTML：
标题
一段文字
列表项 1
列表项 2
它对应的 DOM 树根是 document，#app 是它的子节点（通常为 document.body 或 document.documentElement 的直接子元素），h1、p、ul 是 #app 的子节点，li 又是 ul 的子节点……逐层向下，构成清晰的父子层级。
立即学习“Java免费学习笔记（深入）”；
常用遍历 DOM 树的方法
遍历不等于“操作”，而是按某种顺序访问每个节点。DOM 提供了多种原生方式：
childNodes / children：获取某节点的全部子节点（含文本、注释等）或仅元素子节点（children 更常用） parentNode：向上找父节点，直到 document 或 null nextSibling / previousSibling：找同级的下一个/上一个节点（注意可能拿到空白文本节点）
→ 更安全用 nextElementSibling 和 previousElementSibling querySelector / querySelectorAll：用 CSS 选择器“跳着查”，适合目标明确的查找，不算严格意义上的遍历，但很实用
递归遍历：深度优先（DFS）
这是最贴近“树遍历本质”的写法，从根开始，先处理当前节点，再递归处理所有子元素：
function traverse(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
console.log(node.tagName); // 只处理元素节点
}
for (let child of node.children) {
traverse(child);
}
}
traverse(document.body);
它自然地按 HTML 结构顺序访问：BODY → DIV → H1 → P → UL → LI → LI。
循环遍历：广度优先（BFS）
用队列实现，一层一层往下扫，适合需要“先看到所有一级子元素”的场景：
function bfs(root) {
const queue = [root];
while (queue.length > 0) {
const node = queue.shift();
if (node.nodeType === Node.ELEMENT_NODE) {
console.log(node.tagName);
}
for (let child of node.children) {
queue.push(child);
}
}
}
bfs(document.body);
输出顺序类似：BODY → DIV → H1 → P → UL → LI → LI（取决于 div 下是否还有其他同级元素）。
基本上就这些。DOM 树本身不复杂，但容易忽略节点类型（如文本节点）、空白符影响和 children 与 childNodes 的区别。用对方法，遍历就变得清晰可控。
以上就是什么是javascript树结构_如何遍历DOM树？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542226.html
微信扫一扫 
支付宝扫一扫 
