closest方法从当前元素向上遍历祖先节点（含自身），返回首个匹配CSS选择器的元素，未找到则返回null；它语义清晰、安全简洁，自动跳过非元素节点，兼容现代浏览器（IE不支持）。
closest 方法是现代 DOM 操作中非常实用的工具，它能从当前元素开始，**向上遍历祖先节点（包括自身）**，找到第一个匹配指定选择器的元素。相比传统手动循环 parentElement 或 querySelector 的方式，它更简洁、安全、语义清晰。
基本用法：一步定位最近的父级
语法很简单：
element.closest(selector)其中 selector 是一个 CSS 选择器字符串（如 ".card"、"section"、"[data-role='menu']"）。
它会检查当前元素本身是否匹配，再逐级向上检查父元素，直到找到第一个匹配项或到达 document 根节点为止。没找到就返回 null。
常见使用场景和写法
- 点击按钮时，获取它所在的卡片容器：
event.target.closest(".card") - 处理表单内任意输入框，找最近的 ：
inputEl.closest("form") - 在事件委托中精准定位目标区域：
if (e.target.closest(".action-btn")) { ... } - 支持复合选择器，比如找带特定属性的 div：
el.closest("div[data-section='main']")
注意几个关键细节
- 包含自身：如果当前元素本身就匹配选择器，就直接返回它，不会继续往上找
- 只查祖先，不查兄弟或后代：它严格沿 parentNode 链向上，不横向或向下搜索
- 兼容性良好：Chrome 41+、Firefox 35+、Safari 9.1+、Edge 15+，IE 不支持（需 polyfill 或降级）
- 比 parentNode + while 循环更可靠：自动跳过文本节点、注释节点等非元素节点，无需额外判断 nodeType
对比传统写法（更直观看出优势）
不用 closest，你可能这样写：
let el = target;while (el && !el.classList.contains("card")) {
el = el.parentElement;
}
return el;
而用 closest，一行搞定：
target.closest(".card")
逻辑清晰，代码少，不易出错。
