JavaScript 如何实现 DOM 树遍历

JavaScript 如何实现 DOM 树遍历

作者：低代码工具发布时间：2024-12-30 09:36浏览量：4077

织信企业级低代码开发平台

提供表单、流程、仪表盘、API等功能，非IT用户可通过设计表单来收集数据，设计流程来进行业务协作，使用仪表盘来进行数据分析与展示，IT用户可通过API集成第三方系统平台数据。

免费试用

JavaScript 实现DOM树遍历的主要方式包括使用节点间的关系属性、使用Document对象的查询方法、以及使用现代的遍历API（如TreeWalker和NodeIterator）。这些方法让开发者能够以不同方式遍历DOM树，可以按照需求选择适合的遍历策略。

在详细描述之前，让我们先聚焦于节点间的关系属性。每一个DOM节点都具有一组属性，如parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling，通过这些属性可以对DOM树进行遍历。例如，通过递归地访问某节点的childNodes属性，可以遍历该节点的所有子节点，这被称为深度优先遍历（Depth-First Search, DFS）。借助这些关系属性，开发者可以构建函数以特定顺序访问DOM树的每一个节点。

一、基于DOM关系的遍历

深度优先遍历（Depth-First Search, DFS）和宽度优先遍历（Breadth-First Search, BFS）是两种最基本的DOM遍历方法。深度优先遍历意味着我们先遍历所有子树，然后再移至兄弟节点，而宽度优先遍历则意味着我们先访问同一层级的所有节点，再访问下一层级的节点。

深度优先遍历

要实现深度优先遍历，通常采用递归方法。以下是一个使用递归的深度优先遍历DOM树的基本示例：

function traverseDFS(node) {
  if (node) {
    console.log(node); // 处理当前节点
    var children = node.childNodes;
    for (var i = 0; i < children.length; i++) {
      traverseDFS(children[i]); // 递归遍历所有子节点
    }
  }
}
traverseDFS(document.body); // 从<body>标签开始遍历

宽度优先遍历

宽度优先遍历则需要使用队列来实现，以下是一个宽度优先遍历DOM树的基本示例：

function traverseBFS(root) {
  let queue = [root]; // 初始化队列
  while (queue.length) {
    const node = queue.shift(); // 取出队列的第一个节点
    console.log(node); // 处理当前节点
    var children = node.childNodes;
    for (var i = 0; i < children.length; i++) {
      queue.push(children[i]); // 将子节点加入队列
    }
  }
}
traverseBFS(document.body); // 从<body>标签开始遍历

二、Document对象的查询方法

除了使用节点间的关系属性，为了便捷地查找元素，DOM中的Document对象提供了多个查询方法。

获取特定元素

getElementById是最基本的方法，用来根据ID获取特定的元素。

var element = document.getElementById("unique-id");

获取符合特定条件的元素集合

getElementsByTagName和getElementsByClassName用于根据标签名和类名获取DOM元素的集合。

var elementsByTagName = document.getElementsByTagName("div");
var elementsByClassName = document.getElementsByClassName("some-class");

使用CSS选择器检索元素

更强大和灵活的方法是querySelector和querySelectorAll，它们允许使用CSS选择器语法来查找匹配的单个元素或元素集合。

var firstMatch = document.querySelector(".some-class");
var allMatches = document.querySelectorAll("ul > li.some-class");

三、现代的遍历API

现代浏览器提供了专门的遍历API，允许更灵活地遍历DOM树。

TreeWalker

TreeWalker 是一个构造函数，它提供了对DOM树的节点进行过滤和遍历的方法。

var treeWalker = document.createTreeWalker(
  document.body, 
  NodeFilter.SHOW_ELEMENT,  // 过滤器，这里指示只返回元素节点
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, 
  false
);
while (treeWalker.nextNode()) {
    console.log(treeWalker.currentNode); // 依次访问每个符合条件的节点
}

NodeIterator

类似于TreeWalker，NodeIterator也是用于遍历DOM节点。不同之处在于NodeIterator的遍历不会影响到原始的DOM结构。

var nodeIterator = document.createNodeIterator(
  document.body, 
  NodeFilter.SHOW_ELEMENT
);
var currentNode;
while (currentNode = nodeIterator.nextNode()) {
    console.log(currentNode); // 依次访问每个符合条件的节点
}

以上介绍的是JavaScript中实现DOM树遍历的几种主要方法，开发者可以根据具体情形挑选合适的方式。随着JavaScript语言的不断演化，可能还会有新的方法出现，但核心原理仍然是遍历DOM树这个数据结构。在开发过程中合理利用这些方法将极大提高对DOM操作的效率和性能。

作为一家全球知名的超大型企业，吉利需要大量的技术人员来满足各事业部门的日常数字化需求。在内部强调“降本增效”的大环境下，吉利通过采购“织信低代码平台”，开发周期平均缩短61%，人力投入减少47%，解决了开发需求常年堆积的难题。

医院后勤服务领军者——某管家

国内市场化运作、跨区域经营、集团化管理的大型专业医疗机构后勤服务供应商，全国80多座城市，每天为超过百万的病人和医护人员提供服务，通过织信低代码平台构建线上数字化的方式服务各医院的后勤保障和正常运行，主要为运送条线、保洁条线、秩序条线、工程条线、医废条线等解决工单调度、医辅材料运输、多端协同的效率难题。

中国兵器工业集团——银光化学

国家“一五”期间156个重点项目之一。属于国家高新技术企业，在信息化升级建设中，存在大量“小、散、碎”的信息化需求，需要投入大量人力资源进行开发，通过引入织信低代码平台，解决当下遇到的各类业务难题，提升整体的IT研发效率。

石油领域重点工程单位——川庆钻探

随着国企工规模的不断扩大和内部数字化转型的要求不断提升，公司着眼长远，决定借助织信低代码的各方面能力，从物资储备管理入手，并辐射经营、生产、工程、日常管理等多个板块，为后续内部信息化建设打好基座。

汽车零部件上市企业——川环科技

川环为了有效应对残酷的市场现实，高层一致决定加强公司内部管理，8大部门将全面进行数字化转型，耗时10月，成功上线8套系统，通过织信低代码平台对接现有用友U9ERP，实现各部门的业务线上化，并通过数据治理，实现整个企业从战略到经营管理的分析。

B2C跨境电商知名品牌——朗驰实业

全球500强车企巨头——吉利集团