element.closest(selector)从当前元素自身开始向上查找，返回第一个匹配指定CSS选择器的祖先元素（含自身），未找到则返回null；适用于事件委托、定位包裹容器、表单关联等场景，不支持伪类或后代选择器。
closest 方法的基本行为和适用场景
element.closest 从当前元素自身开始，向上遍历 DOM 树（包括自己），返回第一个匹配指定 CSS 选择器的祖先节点（含自身）。它不查找兄弟或子元素，只走父级链路，且停止于 document 或 shadow root 边界。
典型用途包括：点击事件委托中定位目标容器、表单控件查找所属 <form></form>、按钮查找最近的 .card 或 [data-section] 包裹块。
常见错误：选择器写错或忽略自身匹配
最容易踩的坑是误以为 closest 从父节点开始查——它会先检查元素自己是否匹配。比如对一个 <button class="btn"></button> 调用 btn.closest('.btn')，结果就是它自己，不是它的 <div class="btn"> 父级。<ul>
<li>写错选择器语法：用 <code>'div.btn' 却传了 'div .btn'（后者是后代选择器，closest 不支持）
:hover、:nth-child() 等运行时状态类无法匹配；div > p 这类子选择器也无效与 parentNode + querySelector 的性能和语义差异
closest 是原生方法，单次调用比手写循环 + parentNode 判断快，且语义更清晰。它内部做了优化，避免重复创建 NodeList。
对比手写方式：
element.closest('.modal') // ✅ 简洁、语义明确、可读性高
// ❌ 不推荐：冗余、易漏 null 判断、难以维护
let el = element;
while (el && !el.matches('.modal')) {
el = el.parentNode;
}
return el;
注意：closest 返回 null 而非 undefined，判断时建议用 if (el?.closest(...)) 或显式 != null。
兼容性与 polyfill 关键点
IE 完全不支持 closest；Edge 15+、Chrome 41+、Firefox 35+、Safari 9.1+ 均支持。如需兼容 IE，必须引入 polyfill。
最小可用 polyfill 需覆盖两点：
- 检查
Element.prototype.matches是否存在，否则补全（IE9+ 支持msMatchesSelector） - 遍历时必须包含自身（常见错误是漏掉
el === this判断）
MDN 提供的 polyfill 可直接用，但要注意：若项目已用 jQuery，$(el).closest(...) 行为略有不同（会跳过自身，只查祖先），别混用。
真正容易被忽略的是：服务端渲染（SSR）环境里 element 可能是模拟对象，closest 方法未被挂载——此时必须确保 polyfill 在 DOM 初始化前执行，或在客户端 hydrate 后再调用。
