closest方法从当前元素开始沿DOM树向上遍历（含自身），返回第一个匹配CSS选择器的祖先元素，未找到则返回null；它不查找兄弟或子元素，仅严格沿parentNode链由近及远匹配。
closest 方法从当前元素开始，沿着 DOM 树**向上遍历父级（包括自身）**，返回第一个匹配指定 CSS 选择器的**祖先元素（含自己）**。它不查找兄弟或子元素，只走“往上”的路径。
基本用法和行为特点
调用形式为：element.closest(selector)，返回匹配的最近祖先元素，没找到则返回 null。
- 包含自身：如果当前元素本身满足选择器，就直接返回它
- 严格向上：只检查
parentNode链，不跨树（如 shadow DOM 边界默认不穿透） - 顺序是“由近到远”：先查父节点，再祖父，依此类推，一找到就停止
常见使用场景示例
比如点击一个按钮，想找出它所在的卡片容器（类名为 .card）：
button.addEventListener('click', function() {
const card = this.closest('.card');
if (card) {
console.log('所属卡片：', card);
}
});
再比如判断点击是否发生在下拉菜单内部：
立即学习“Java免费学习笔记（深入）”；
document.addEventListener('click', function(e) {
if (!e.target.closest('.dropdown')) {
// 点击在下拉区域外，可关闭菜单
closeDropdown();
}
});
注意兼容性和边界情况
IE 不支持 closest，需用 polyfill 或降级方案（如手动遍历 parentNode）。另外：
- 空字符串、无效选择器会抛错，建议确保 selector 是合法非空字符串
- 对 SVG 元素也有效，但某些旧版浏览器可能有差异
- 若元素已从 DOM 移除，
closest仍可工作（只要节点关系还在）
和 parentNode / matches 的关系
closest 本质是 matches + 循环 parentNode 的语法糖。等价逻辑类似：
function closest(el, selector) {
while (el) {
if (el.matches(selector)) return el;
el = el.parentNode;
}
return null;
}
所以它比手写循环更简洁安全，且语义明确。
