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 方法是最简洁高效的方式，推荐在支持的环境中优先使用。