closest方法用于从当前元素开始向上查找第一个匹配css选择器的祖先元素（含自身），返回匹配的element节点或null；它先检查自身，再逐级向上至document根节点（不含document），不跨shadow dom边界。
closest 方法用于从当前元素开始，沿着 DOM 树向上查找**第一个匹配指定 CSS 选择器的祖先元素（含自身）**。它返回匹配的 Element 节点，没找到则返回 null。
基本用法和返回规则
调用方式很简单：element.closest(selector)，其中 selector 是一个合法的 CSS 选择器字符串（如 "div"、".btn"、"[data-id]"、"article > header" 等）。
注意：它会先检查当前元素自身是否匹配，再逐级向上检查父元素、祖父元素……直到 document 根节点为止（不包含 document 本身）。
常见使用场景
- 点击按钮时，找它所在的卡片容器：
event.target.closest(".card") - 表单内任意输入框触发事件，定位所属的
<form></form>：input.closest("form") - 处理委托事件时，快速识别目标操作区域：
e.target.closest("[data-action]") - 判断点击是否发生在某个弹窗内部：
e.target.closest(".modal") !== null
兼容性与降级方案
现代浏览器（Chrome 41+、Firefox 35+、Edge 15+、Safari 9.1+）都支持 closest。IE 完全不支持，需自行实现或使用 polyfill。
简易降级写法（仅支持简单选择器，不含复杂伪类）：
function closest(el, selector) {
while (el && el.nodeType === 1) {
if (el.matches(selector)) return el;
el = el.parentElement;
}
return null;
}
注意：matches 在旧版 Edge 和 IE 中叫 msMatchesSelector，实际项目中建议直接引入成熟 polyfill（如 jonathantneal/closest）。
和 parentNode / querySelector 的区别
-
parentNode只能获取直接父节点，无法按条件筛选；closest是“带条件向上找” -
querySelector是向下查找后代；closest是向上查找祖先（方向相反） -
closest不会跨 Shadow DOM 边界（默认行为），如需穿透需配合shadowRoot手动处理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
