如何正确使用 .closest() 方法查找祖先元素-js教程-PHP中文网

如何正确使用 .closest() 方法查找祖先元素

.closest() 会从当前元素自身开始向上匹配，而非仅搜索父级；若需跳过自身查上层祖先，应结合 .parentNode 使用。

`.closest()` 会从当前元素自身开始向上匹配，而非仅搜索父级；若需跳过自身查上层祖先，应结合 `.parentnode` 使用。

在 DOM 遍历中，`.closest(selector)` 的行为常被误解：它**并非“查找最近的父级匹配元素”**，而是 **“从调用元素自身起，沿祖先链（含自身）向上查找第一个匹配 selector 的元素”**。这意味着即使你传入的是一个已知的子元素，再次对其调用 `.closest('div')` 仍可能返回它自己——只要它本身就是一个 `

`。

以示例代码为例：

<div id="grandparent">
  Grandparent
  <div id="parent">
    Parent
    <div id="child">
      Child
      <button onclick="testClosest(this)">Test Closest</button>
    </div>
  </div>
</div>

当点击按钮时，this 指向 <button></button> 元素。执行：

let firstParentDiv = element.closest('div'); // → 返回 id="child" 的 div（button 的最近匹配祖先，即其直接父 div）
console.log('First Parent Div ID:', firstParentDiv.id); // 输出 "child"

此时 firstParentDiv 是 <div id="child">。紧接着：<pre class="brush:php;toolbar:false;">let secondParentDiv = firstParentDiv.closest('div'); // → 仍从该 div 自身开始查！而它自己就是 div，所以立即匹配，返回自身 console.log('Second Parent Div ID:', secondParentDiv?.id); // 输出 "child"，而非预期的 "parent"</pre> <p>✅ 正确做法：若目标是获取<strong>严格意义上的上一级匹配祖先</strong>（跳过自身），应先通过 <code>.parentNode 获取父节点，再在其基础上调用 .closest()：

function testClosest(element) {
  const firstParentDiv = element.closest('div');
  console.log('First Parent Div ID:', firstParentDiv?.id || 'None');

  // ✅ 关键修正：先取 parentNode，再 closest
  const secondParentDiv = firstParentDiv?.parentNode?.closest('div');
  console.log('Second Parent Div ID:', secondParentDiv?.id || 'None');
}

这样执行流程变为：
button → .closest('div') → #child
→ .parentNode → <div id="parent"> 的父节点（即 <code>#parent 元素）
→ .closest('div') → 从 #parent 自身开始查 → 匹配成功 → 返回 #parent

⚠️ 注意事项：

始终检查 .closest() 返回值是否为 null（尤其在 DOM 结构不确定时），避免运行时错误；
.parentNode 返回的是 Node，可能为 DocumentFragment 或 Text 节点，因此推荐链式调用 ?.parentNode?.closest(...) 保证健壮性；
若需获取所有匹配的祖先（而不仅是最近一个），应使用 element.parentElement 循环遍历，或配合 querySelectorAll + Array.from(ancestors).find(...) 实现。