js 实现 parents

在 JavaScript 中，实现类似 jQuery 的 parents() 方法可以通过遍历 DOM 树来完成。以下是几种实现方式：

使用纯 JavaScript 实现 parents()

通过递归或循环遍历当前元素的父节点，直到根元素。

function parents(element, selector) {
  const parentsList = [];
  let current = element.parentNode;

  while (current && current.nodeType === 1) { // 1 表示元素节点
    if (!selector || current.matches(selector)) {
      parentsList.push(current);
    }
    current = current.parentNode;
  }

  return parentsList;
}

使用 Element.closest() 结合循环

如果需要匹配特定选择器的祖先元素，可以结合 closest 和循环实现。

function parents(element, selector) {
  const parentsList = [];
  let current = element.parentNode;

  while (current && current.nodeType === 1) {
    if (!selector || current.matches(selector)) {
      parentsList.push(current);
    }
    current = current.parentNode;
  }

  return parentsList;
}

使用递归实现

递归方式可以更简洁地遍历所有父级元素。

function parents(element, selector, result = []) {
  const parent = element.parentNode;
  if (!parent || parent.nodeType !== 1) return result;

  if (!selector || parent.matches(selector)) {
    result.push(parent);
  }
  return parents(parent, selector, result);
}

示例用法

假设有以下 HTML 结构：

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

调用 parents 方法：

const child = document.querySelector('.child');
const ancestors = parents(child, 'div'); // 获取所有 div 父元素
console.log(ancestors); // [parent, grandparent]

注意事项

• nodeType === 1 确保只处理元素节点（跳过文本节点、注释节点等）。
• matches 方法用于检查元素是否匹配选择器，兼容性良好。
• 如果需要兼容旧浏览器，可以使用 matches 的 polyfill 或 msMatchesSelector。

以上方法提供了灵活的方式实现 parents() 功能，可根据需求选择递归或循环实现。