jQuery 的 .parents() 方法的纯 JavaScript 等价物是什么？ [复制]

Question

对于此类问题，我深表歉意，但我在 You Might Not Need jQuery 或网上其他任何地方都找不到答案，我真的很想知道：

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

例如，如果知道如何在纯 JavaScript 中做到这一点，那就太好了：

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

Answer 1

DOM API 中没有一个函数/属性等同于 jQuery 的parents()。有parentNode 属性（和Oriol points out 一样，parentElement 属性会阻止你从document.documentElement 到document），它是上元素的父节点（或父元素）您可以访问它，或者 null 如果它没有。要大致匹配 jQuery 的 parents()，您可以在其上循环（例如，获取 parentNode/parentElement 的 parentNode/parentElement 等）以查找所有父母。作为squint notes，在每个级别的模糊现代浏览器上，您可以使用matches 来检查父级是否匹配选择器（当您将选择器传递给parents() 时，将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>

Answer 2

Node.parentNode

当您通过某种方法（document.getElementById()、document.querySelector() 等）获取 HTML 时，它将返回一个 Node 对象，该对象的 .parentNode 属性是父 Node 对象

---

获取所有父节点，类似于 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
}

请注意，这只是经过轻微测试，因此请谨慎使用