JavaScript 中 DOM 节点遍历与搜索方法如何使用

DOM节点遍历与搜索需区分节点类型：parent/child/next/previous系列属性返回各类节点，推荐用Element后缀方法；querySelector系基于CSS选择器精准查找；getElementsBy系返回实时HTMLCollection；matches和closest用于条件判断与向上查找。

dom 节点遍历与搜索是 javascript 操作页面结构的核心能力，关键在于理解节点关系和方法适用场景——不是所有方法都返回元素节点，有些返回包含文本、注释在内的全部节点，使用前需确认返回值类型。

用 parent/child/next/previous 系列属性遍历直接关系

这些属性访问的是“直接相连”的节点，不跳过中间层级，且返回值可能是元素节点（Element），也可能是文本节点（Text）或注释节点（Comment）。

• parentNode：获取父节点，几乎所有节点都有（除 document 本身）；注意：document.documentElement.parentNode 是 document，而 document.parentNode 是 null
• childNodes：返回 NodeList，含所有子节点（元素、文本、注释），不是 HTMLCollection，不支持 forEach，需转数组或用 for 循环
• children：只返回子元素节点（Element），返回 HTMLCollection，可直接 forEach，更常用
• firstChild / lastChild：可能返回空白文本节点，容易出错；firstElementChild / lastElementChild 更安全，只返回元素
• nextSibling / previousSibling：同样可能返回文本节点；nextElementSibling / previousElementSibling 只找相邻元素，推荐优先使用

用 querySelector 和 querySelectorAll 精准查找元素

这两个方法基于 CSS 选择器语法，功能强大、语义清晰，是现代开发中最常用的搜索方式。

• querySelector(selector)：返回匹配的第一个元素节点，没找到返回 null
• querySelectorAll(selector)：返回静态 NodeList（非实时），包含所有匹配的元素节点
• 支持复杂选择器：div#main .item[data-active="true"]、:not(.disabled) > button
• 可在任意元素上调用，不限于 document，实现局部查找：container.querySelector('input')

用 getElementsBy 系列方法获取动态集合

这类方法返回 HTMLCollection（实时更新），适合需要响应 DOM 变化的场景，但选择器能力有限。

• getElementsByTagName(tagName)：按标签名查找，"*" 匹配所有元素
• getElementsByClassName(className)：按 class 查找，参数是字符串（不要加点），支持多个 class 用空格分隔
• getElementsByName(name)：仅对具有 name 属性的元素有效（如 form、input、img）
• 注意：它们不支持 CSS 伪类或属性选择器，且返回的是实时集合——后续新增匹配元素会自动加入结果中

用 matches 和 closest 实现条件判断与向上查找

这两个方法常用于事件委托和状态判断，逻辑清晰、性能良好。

立即学习“Java免费学习笔记（深入）”；

• element.matches(selector)：判断当前元素是否匹配给定选择器，返回布尔值，替代旧式 tagName/class 判断
• element.closest(selector)：从自身开始向上查找，返回第一个匹配的祖先元素（含自己），找不到返回 null；比循环 parentNode + matches 更简洁安全
• 典型用法：event.target.closest('button') 在事件监听中精准识别操作目标