js实现closest
JavaScript 实现 closest 方法
在 JavaScript 中，closest 方法用于查找与当前元素匹配的选择器的最近祖先元素。以下是实现该功能的几种方式：
原生 Element.closest 方法
现代浏览器原生支持 Element.closest 方法，可以直接使用：
const element = document.querySelector('.child');
const closestParent = element.closest('.parent');兼容性实现（Polyfill）
对于不支持 closest 方法的旧浏览器，可以使用以下 Polyfill：
if (!Element.prototype.closest) {
Element.prototype.closest = function(selector) {
let el = this;
while (el) {
if (el.matches(selector)) {
return el;
}
el = el.parentElement;
}
return null;
};
}手动实现
如果不希望修改原型，可以单独实现一个函数：
function closest(element, selector) {
while (element) {
if (element.matches(selector)) {
return element;
}
element = element.parentElement;
}
return null;
}
// 使用示例
const element = document.querySelector('.child');
const closestParent = closest(element, '.parent');递归实现
另一种实现方式是使用递归：
function closest(element, selector) {
if (!element) return null;
if (element.matches(selector)) return element;
return closest(element.parentElement, selector);
}注意事项
matches方法也需要 Polyfill 支持，可以使用matchesSelector或webkitMatchesSelector等前缀方法。- 这些实现都只向上查找 DOM 树，不会查找兄弟节点或子节点。
- 选择器字符串应符合 CSS 选择器语法。
以上方法可以根据项目需求和浏览器兼容性要求选择使用。原生 closest 方法是最简洁高效的方式，推荐在支持的环境中优先使用。
