closest() 方法从当前元素开始向上查找第一个匹配指定CSS选择器的祖先元素（含自身），返回匹配的Element节点或null，不跨Shadow DOM，IE需polyfill。
closest() 方法用于从当前元素开始，沿着 DOM 树向上逐级查找**第一个匹配指定 CSS 选择器的祖先元素（含自身）**。它比反复调用 parentNode + matches() 更简洁、高效，是现代前端开发中定位“最近的某个容器/上下文”的首选方式。
基本用法：从自身开始向上找
该方法会检查当前元素是否匹配选择器；如果不匹配，再检查父元素，依此类推，直到找到匹配项或到达文档根节点（document）为止。
- 返回值是匹配的第一个 Element 节点，未找到则返回 null
- 支持任意合法的 CSS 选择器：类名（
.card）、标签（section）、属性（[data-role="modal"]）、复合选择器（.list-group > li）等 - 不匹配文本节点、注释节点等非元素节点
常见实用场景与写法
✅ 点击按钮时获取所属卡片容器：button.addEventListener('click', e => {<br> const card = e.target.closest('.card');<br> if (card) console.log('操作卡片：', card);<br>});
✅ 表单内任意输入框触发时定位整个表单：formContainer.addEventListener('input', e => {<br> const form = e.target.closest('form');<br> if (form) validateForm(form);<br>});
✅ 判断点击是否发生在下拉菜单内部：document.addEventListener('click', e => {<br> if (!e.target.closest('.dropdown-menu')) {<br> closeAllDropdowns();<br> }<br>});
注意边界情况
- 如果传入的选择器语法错误，会抛出
SyntaxError，建议确保选择器字符串合法 -
closest()不会跨 Shadow DOM 边界查找（即不会进入shadowRoot内部），如需穿透需手动处理 - 它只找**祖先元素**（包括自己），不查找兄弟、子元素或文档其他位置的匹配项
- 在 IE 中不支持，需使用 polyfill 或改用
Element.matches()配合循环遍历
对比 parentNode + matches() 的手动实现
手动模拟逻辑如下（仅作理解参考，实际请直接用 closest()）：
function closest(el, selector) {<br> while (el && el.nodeType === Node.ELEMENT_NODE) {<br> if (el.matches(selector)) return el;<br> el = el.parentNode;<br> }<br> return null;<br>}可见 closest() 就是这个逻辑的标准封装，语义清晰、性能优化、无需重复造轮子。
