最常用方式是 parentnode 或 parentelement:parentnode 返回任意父节点(含 document),parentelement 仅返回元素节点;向上遍历用 while 循环配合 parentelement;推荐 closest() 反向查询祖先元素。

在 JavaScript 中,子节点可以通过内置属性直接访问其父级 DOM 元素,最常用、最直接的方式是使用 parentNode 或 parentElement。两者略有区别,适用场景不同。
parentNode:返回任意类型的父节点(包括 Document、DocumentFragment)
parentNode 是 Node 接口的属性,所有节点(元素、文本、注释等)都继承它。它返回的是**直接的父节点**,类型可能是 Element、Document、DocumentFragment 等。
- 如果子节点是某个
<div> 内的文本节点,<code>parentNode就是那个<div> 元素; <li>如果子节点是 <code>document.body的直接子节点,parentNode就是document; - 若节点已脱离 DOM 树(比如刚创建未 append),
parentNode为null。 - 适合需要确保拿到的是 HTML 元素(如
<div>, <code><span></span>)的场景; - 当子节点的父节点是
document(比如document.body),parentElement返回null,而parentNode返回document; - 日常操作中,如果你明确要找“上一级标签”,优先用
parentElement,避免误操作非元素节点。 - 从当前子节点开始,用
let el = target.parentElement; - 用
while (el)循环,每次检查el.matches('.card')或el.classList.contains('modal'); - 匹配成功就
break,失败则继续el = el.parentElement; - 循环结束时
el要么是目标元素,要么是null(没找到)。 - closest(selector):最推荐的“反向查询”方法——从自身开始,向上查找**第一个匹配选择器的祖先元素(含自己)**,返回 Element 或 null;
- offsetParent:返回用于计算定位(position)的最近定位祖先,常用于坐标计算,不是通用父级;
-
getRootNode():获取所在根节点(通常是
document或 ShadowRoot),不用于查父级元素。
parentElement:只返回父级“元素节点”,更安全用于 DOM 操作
parentElement 是 Element 接口的属性,只对元素节点有效(但也可被所有节点访问)。它只返回**父级的 Element 类型节点**,忽略 Document、DocumentFragment、Text 等非元素节点。
向上遍历多层:用 while 循环配合 parentElement
如果要查找祖先中满足条件的某一层(比如最近的 .card 容器),不能只靠一次访问,需逐级向上检查:
补充:其他相关属性(按需选用)
除了主要两个,还有几个辅助属性可配合使用:











