在纯 JavaScript 中，我如何才能找到最靠近具有特定类的树的元素的祖先？例如，在这样的树中：
<div class="far ancestor">
<div class="near ancestor">
<p>Where am I?</p>
</div>
</div>
然后我想要div.near.ancestor，如果我在p 上尝试这个并搜索ancestor。
【问题讨论】：
p 元素的祖先。如果你真的只想获取父节点，可以ele.parentNode。
标签： javascript html dom
更新：现在支持in most major browsers
document.querySelector("p").closest(".near.ancestor")
注意，这可以匹配选择器，而不仅仅是类
https://developer.mozilla.org/en-US/docs/Web/API/Element.closest
对于不支持closest() 但有matches() 的旧版浏览器，可以构建类似于@rvighne 的类匹配的选择器匹配：
function findAncestor (el, sel) {
while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
return el;
}
【讨论】：
closest 的DOM Level 4 polyfill 以及许多更高级的DOM 遍历功能。您可以单独提取该实现或包含整个捆绑包以在您的代码中获得许多新功能。
这就是诀窍：
function findAncestor (el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
while 循环一直等到el 拥有所需的类，并且每次迭代都将el 设置为el 的父级，因此最后，您拥有该类的祖先或null。
Here's a fiddle，如果有人想改进它。它不适用于旧浏览器（即 IE）；看到这个compatibility table for classList。此处使用parentElement 是因为parentNode 将涉及更多工作以确保该节点是一个元素。
【讨论】：
.classList 的替代方案，请参阅stackoverflow.com/q/5898656/218196。
parentElement 是一个相当新的属性（DOM 级别 4），parentNode 存在于......永远。所以parentNode 也适用于旧版浏览器，而parentElement 可能不行。当然，您可以为/反对classList 提出相同的论点，但它没有像parentElement 那样的简单替代方案。我真的很想知道为什么parentElement 存在，它似乎没有比parentNode 增加任何价值。
while (!el.classList.contains(cls) && (el = el.parentElement));
使用 element.closest()
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
查看这个示例 DOM：
<article>
<div id="div-01">Here is div-01
<div id="div-02">Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</article>
这就是你将如何使用 element.closest：
var el = document.getElementById('div-03');
var r1 = el.closest("#div-02");
// returns the element with the id=div-02
var r2 = el.closest("div div");
// returns the closest ancestor which is a div in div, here is div-03 itself
var r3 = el.closest("article > div");
// returns the closest ancestor which is a div and has a parent article, here is div-01
var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article
【讨论】：
基于the8472 answer 和https://developer.mozilla.org/en-US/docs/Web/API/Element/matches 这里是跨平台的2017 解决方案：
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
function findAncestor(el, sel) {
if (typeof el.closest === 'function') {
return el.closest(sel) || null;
}
while (el) {
if (el.matches(sel)) {
return el;
}
el = el.parentElement;
}
return null;
}
【讨论】：
@rvighne 解决方案效果很好，但正如 cmets ParentElement 和 ClassList 中所确定的那样，两者都存在兼容性问题。为了使其更兼容，我使用了：
function findAncestor (el, cls) {
while ((el = el.parentNode) && el.className.indexOf(cls) < 0);
return el;
}
parentNode 属性而不是 parentElement 属性className 属性上的indexOf 方法，而不是classList 属性上的contains 方法。当然，indexOf 只是寻找那个字符串的存在，它并不关心它是否是整个字符串。因此，如果您有另一个具有“ancestor-type”类的元素，它仍然会返回找到“祖先”，如果这对您来说是个问题，也许您可以使用正则表达式来查找完全匹配。
【讨论】：
此解决方案应该适用于 IE9 及更高版本。
这就像 jQuery 的 parents() 方法，当您需要获取可能比给定元素高几级的父容器时，例如找到包含单击的 <button> 的 <form>。遍历父母直到找到匹配的选择器，或者直到它到达<body>。返回匹配元素或<body>。
function parents(el, selector){
var parent_container = el;
do {
parent_container = parent_container.parentNode;
}
while( !parent_container.matches(selector) && parent_container !== document.body );
return parent_container;
}
【讨论】：