js parents 实现

在 JavaScript 中，可以通过多种方式实现类似“parents”的功能，即获取元素的祖先节点。以下是几种常见方法：

使用 parentNode 循环

通过循环 parentNode 属性，可以逐级向上遍历 DOM 树，直到到达指定的祖先元素或文档根节点。

function getParents(element, selector) {
  const parents = [];
  let current = element.parentNode;
  while (current && current !== document) {
    if (!selector || current.matches(selector)) {
      parents.push(current);
    }
    current = current.parentNode;
  }
  return parents;
}

使用 closest 方法

Element.closest() 方法返回匹配指定选择器的最近祖先元素。虽然它只返回一个元素，但可以通过循环实现类似功能。

function getAllParents(element, selector) {
  const parents = [];
  let current = element;
  while (current !== document) {
    current = current.parentNode;
    if (current && current.matches(selector)) {
      parents.push(current);
    }
  }
  return parents;
}

使用 jQuery 的 parents 方法

如果项目中使用了 jQuery，可以直接调用 parents() 方法获取所有祖先元素。

const parents = $(element).parents(selector);

使用 Element.prototype 扩展

可以扩展 Element 原型，添加自定义的 parents 方法。

Element.prototype.parents = function(selector) {
  const parents = [];
  let current = this.parentNode;
  while (current && current !== document) {
    if (!selector || current.matches(selector)) {
      parents.push(current);
    }
    current = current.parentNode;
  }
  return parents;
};

注意事项

• 使用 parentNode 时需注意边界条件，避免无限循环。
• matches 方法在现代浏览器中支持良好，但在旧版本中可能需要前缀（如 msMatchesSelector）。
• 扩展原生原型可能影响代码的可维护性，需谨慎使用。