jQuery的.parents()方法在纯JavaScript中的等价方法是什么？

Question

非常抱歉问这种问题，但我在 You Might Not Need jQuery 或其他任何网站上都找不到答案，我真的很想知道：

jQuery 的 .parents() 方法在纯 JavaScript 中等价于什么？

例如，了解如何在纯 JavaScript 中执行此操作将非常有帮助：

jQuery(element).parents('.className');

- user5508297

---

没有纯JavaScript等效于jQuery的.parents()方法。您是指“jQuery的parents()方法的DOM API版本是什么？”吗？ - T.J. Crowder

while ((element = element.parentElement)) { if (element.matches('.className')) { result.push(element) } }зҝ»иҜ‘пјҡеҪ“elementеӯҳеңЁзҲ¶е…ғзҙ ж—¶пјҢйҮҚеӨҚжү§иЎҢд»ҘдёӢж“ҚдҪңпјҡеҰӮжһңиҜҘзҲ¶е…ғзҙ зҡ„зұ»еҗҚдёә.classNameпјҢеҲҷе°Ҷе…¶еҠ е…ҘеҲ°resultж•°з»„дёӯгҖӮ - user1106925

我非常确定这是一个重复的问题，但我找不到它。 - Bergi

您可以随时查看 jQuery 的 Github 源代码：.parents() -> dir()。 - Patrick Evans

啊，是的，这个就是我在寻找的。 - Bergi

我直接去了他们的Github并搜索，但似乎“bitten”在下面列出了遍历模块的答案。 - Patrick Evans

Answer 1

在DOM API中，没有一个与jQuery的parents()相等的函数/属性。有parentNode属性（正如Oriol指出的那样，parentElement属性将防止您从document.documentElement到document），它是访问它的元素的父节点（或父元素），如果没有则为null。要大致匹配jQuery的parents()，可以循环遍历它（例如，获取parentNode/parentElement的parentNode/parentElement等）以查找所有父级。如squint所述，在较新的浏览器上，每个级别都可以使用matches来检查父级是否与选择器匹配（以匹配当您向其传递选择器时的jQuery行为parents()）。

jQuery采用基于集合的方法进行DOM操作和遍历，而DOM API则采用基于元素/节点的方法。

示例：

var elm = document.getElementById("target");
var parents = getParents(elm);
console.log(Array.prototype.map.call(
  parents,
  function(e) {
    return e.nodeName + (e.id ? "#" + e.id : "");
  }
).join(", "));
function getParents(e) {
  var result = [];
  for (var p = e && e.parentElement; p; p = p.parentElement) {
    result.push(p);
  }
  return result;
}

<div id="outermost">
  <div id="middle">
    <div id="inner">
      <div id="target"></div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

- T.J. Crowder

---

使用parentElement替代parentNode以避免使用document。 - Oriol

@Oriol：这需要比matches/matchesSelector更现代的浏览器。 - Bergi

@Bergi 或许，如果你考虑使用带有供应商前缀的非标准名称。parentElement 不需要这样做，并且比 matches 有更多的支持。 - Oriol

@Oriol：哎呀，对不起，我把matchesSelector和matches支持混淆了。 - Bergi

Answer 2

Node.parentNode

当你通过某些方法（例如document.getElementById()，document.querySelector()等）获取HTML时，它将返回一个Node对象，该对象的.parentNode属性是其父节点对象。

---

要获取所有父节点，类似于jQuery的.parents()：

我之前写过这个函数：

function parents(node) {
   let current = node,
       list    = [];
   while(current.parentNode != null && current.parentNode != document.documentElement) {
     list.push(current.parentNode);
     current = current.parentNode;
   }
    return list
}

请注意，这仅经过了轻微测试，因此请持保留态度。

- bren

---

@T.J.Crowder同意了。取消了下投票，太苛刻了 :-) - HaukurHaf

使用 parentElement，无需检查 != document。 - Oriol

在访问.parentNode之前，您需要确保current不为null。 - user1106925

body 的 parentElement 不是文档吗？ - bren

我最初是用递归写的，然后改成了循环。 - bren