closest方法从当前元素自身开始向上遍历DOM树查找首个匹配CSS选择器的祖先元素，返回该元素或null；支持类名、ID等标准选择器（IE9+），不支持伪类伪元素，需注意空选择器抛错及旧浏览器兼容方案。

closest 方法用于从当前元素开始，向上遍历 DOM 树（包括自身），查找第一个匹配指定 CSS 选择器的祖先元素（含自己）。它返回匹配到的第一个元素，没找到则返回 null。

基本用法和行为特点

不同于 parent() 或 parents()（jQuery 中），原生 JS 的 closest() 是标准 DOM 方法，支持所有现代浏览器（IE9+，但 IE9-11 仅支持简单选择器，如 .cls、#id、div，不支持 :nth-child 等伪类）。

• 从调用元素自身开始检查，不是只查父辈
• 逐级向上（parentNode）查找，直到文档根节点（document.documentElement）为止
• 选择器语法与 querySelector 一致，支持类名、ID、标签、属性选择器等（兼容范围内）
• 返回单个元素，不是 NodeList

常见使用示例

假设 HTML 结构如下：

  

    点击
  

在按钮点击事件中获取最近的 .panel：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

document.querySelector('.action-btn').addEventListener('click', function(e) {
  const panel = e.target.closest('.panel'); // ✅ 找到 section
  console.log(panel);
});

也可以用更宽泛的选择器：

e.target.closest('div'); // 找到 #container
e.target.closest('[data-role="widget"]'); // 匹配带 data-role="widget" 的祖先

注意边界情况

• 如果当前元素自身就匹配，直接返回它（例如 el.closest('.active') 且 el 有 active 类）
• 传入空字符串、无效选择器会抛出 SyntaxError
• 传入 null 或 undefined 会报错，建议先校验
• 不支持伪元素（如 ::before）或部分动态伪类（如 :hover），因为它们不对应真实 DOM 节点

替代方案（兼容老浏览器时）

若需支持 IE8 及更早版本，可手动实现简易版：

function closest(el, selector) {
  while (el && el.nodeType === 1) {
    if (el.matches && el.matches(selector)) return el;
    el = el.parentElement;
  }
  return null;
}

其中 el.matches 在旧版 IE 中可用 msMatchesSelector 兜底，但通常建议用轻量库（如 polyfill.io）或放弃极端旧环境。