当前位置：首页 > JavaScript

js parents 实现

2026-02-01 09:58:47JavaScript

在 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 方法。

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