js parents 实现

parents 方法实现

在 JavaScript 中，parents 方法用于获取一个元素的所有祖先元素，类似于 jQuery 中的 parents() 方法。以下是几种实现方式：

原生 JavaScript 实现

function getParents(element) {
  const parents = [];
  let current = element.parentElement;

  while (current) {
    parents.push(current);
    current = current.parentElement;
  }

  return parents;
}

使用 Element.closest 实现

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

  while (current) {
    if (!selector || current.matches(selector)) {
      parents.push(current);
    }
    current = current.parentElement;
  }

  return parents;
}

使用递归实现

function getParents(element, parents = []) {
  if (!element.parentElement) return parents;
  parents.push(element.parentElement);
  return getParents(element.parentElement, parents);
}

示例用法

const childElement = document.querySelector('.child');
const allParents = getParents(childElement);
console.log(allParents); // 输出所有祖先元素

带选择器过滤

const filteredParents = getParents(childElement, '.parent-class');
console.log(filteredParents); // 输出匹配选择器的祖先元素

这些方法可以根据具体需求选择使用，原生实现简单高效，递归实现代码简洁但可能受限于调用栈深度。