Node.parentNode

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的{{1}} / parentNode等等所有的父母。作为squint notes，在每个级别的模糊现代浏览器上，您可以使用matches检查父级是否匹配选择器（以便在将jQuery的行为传递给选择器时将其与parentElement匹配）。

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

示例：

parents()

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;
}

Answer 2

Node.parentNode

当您通过某种方法（<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>，document.getElementById()等）获取HTML时，它将返回一个Node对象，该对象的document.querySelector()属性是父节点对象

<小时/> 获取所有父节点，类似于jQuery的.parentNode：

我曾经写过这个函数：

.parents()

请注意，这只是经过了轻微的测试，所以请带上一粒盐

什么是jQuery的.parents（）方法的纯JavaScript等价物？

2 个答案:

Node.parentNode