js实现closest

JavaScript 实现 closest 方法

在 JavaScript 中，closest 方法用于查找当前元素或其祖先元素中与指定选择器匹配的第一个元素。如果浏览器不支持原生 closest 方法，可以通过以下方式实现：

原生 closest 方法（现代浏览器支持）

现代浏览器已经原生支持 Element.closest() 方法，可以直接使用：

const element = document.querySelector('.child-element');
const closestParent = element.closest('.parent-selector');

手动实现 closest 方法（兼容旧浏览器）

对于不支持 closest 的旧浏览器，可以通过以下代码实现：

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;
  };
}

使用示例

const element = document.querySelector('.target');
const closestDiv = element.closest('div'); // 查找最近的 div 祖先

注意事项

• matches 方法也需要 polyfill，旧浏览器可能不支持。可以添加以下代码：

  if (!Element.prototype.matches) {
    Element.prototype.matches = 
      Element.prototype.matchesSelector || 
      Element.prototype.webkitMatchesSelector ||
      Element.prototype.msMatchesSelector;
  }

• 该方法从当前元素开始向上查找，直到找到匹配的元素或到达文档根节点。

• 如果选择器无效或未找到匹配项，返回 null。

性能优化

对于频繁调用 closest 的场景，可以缓存选择器结果或使用事件委托减少 DOM 遍历次数。