js 实现 parents

在JavaScript中，实现类似jQuery的parents()方法可以通过DOM遍历来获取目标元素的所有祖先元素。以下是几种实现方式：

使用纯JavaScript实现

通过递归或循环逐层向上查找父元素，直到文档根节点：

function parents(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;
}

// 使用示例
const child = document.querySelector('.child');
const allParents = parents(child); // 所有祖先元素
const filteredParents = parents(child, '.target'); // 符合选择器的祖先

使用Element.closest()的变体

如果需要获取到特定选择器匹配的祖先链：

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

  while (current && current !== document) {
    if (selector && current.matches(selector)) break;
    elements.push(current);
    current = current.parentNode;
  }

  return elements;
}

兼容旧浏览器的实现

对于不支持Element.matches()的环境：

function parents(element, selector) {
  const parents = [];
  let current = element.parentNode;
  const matches = Element.prototype.matches || 
                 Element.prototype.msMatchesSelector;

  while (current && current !== document) {
    if (!selector || matches.call(current, selector)) {
      parents.push(current);
    }
    current = current.parentNode;
  }

  return parents;
}

注意事项

• 该方法返回的节点顺序是从直接父元素到最外层祖先
• 如果传入选择器参数，则只返回匹配选择器的元素
• 现代浏览器推荐使用Element.closest()实现类似功能，但该方法只返回单个匹配元素

这些实现方式均避免了jQuery依赖，适合原生JavaScript项目使用。根据实际需求选择是否需要选择器过滤功能。