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

Question

<分区>

Answer 1

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