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

Question

对于此类问题，我深表歉意，但我无法在您可能不需要 jQuery或其他任何在线网站上找到答案，我真的很想知道：

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

例如，知道如何在纯 JavaScript 中执行此操作会很棒：

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

Answer 1

DOM API 中没有一个函数/属性等同于 jQuery 的parents(). 有一个parentNode属性（正如Oriol 指出的，该parentElement属性将阻止您从document.documentElementup 到document），它是您访问它的元素的父节点（或父元素），或者null如果它没有一。为了粗略匹配 jQuery 的parents()，您可以对其进行循环（例如，获取parentNode/parentElement的parentNode/parentElement等）以查找所有父项。正如斜视指出的那样，在每个级别的模糊现代浏览器上，您可以使用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>