JavaScript - Element.closest未获取样式

Question

我一直在浏览JavaScript上的MDN文档，并且遇到了Element.closest属性。这仍然只是一个实验性的属性，但了解如何使用它是很重要的。

这里的规范说什么

的Element.closest（）方法返回当前元素（或当前元素本身），其参数给出的选择相匹配的最近的祖先。如果没有这样的祖先，它将返回null。

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

var par = document.getElementById('my-id'); 
 

 
par.closest("h2").style.background = "yellow";

<div id="first"> 
 
    <h2>Heading</h2> 
 
    <div id="second"> 
 
    <div id="third">  
 
     <p id="my-id">This is a paragraph</p> 
 
    </div> 
 
    </div> 
 
</div>

我使用最新版本的谷歌浏览器。根据兼容性图表，这应该在谷歌浏览器41 +

我找不到任何理由为什么这不起作用。

任何理论？

Answer 1

正如你所说，此方法返回closest ancestor，这取决于你把selector的。你的情况h2不是#my-id的祖先，也不能返回本身，因为它们不是同一类型，所以结果为空。如果更改p#my-id到h2#my-id它会工作：

正是在这个例子的工作：

var par = document.getElementById('my-id'); 
 

 
par.closest("h2").style.background = "yellow"; //returns itself 
 
par.closest("#first").style.color = "red"; // change color of an ancestor

<div id="first"> 
 
    <h2>Heading</h2> 
 
    <div id="second"> 
 
    <div id="third"> 
 
     <h2 id="my-id">This is a paragraph</h2> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我始终认为，伟大的叔叔是祖先。要访问标题，他们可以使用uncle selector。

您可以使用#closest找到您的祖父，然后使用previousElementSibling找到他的哥哥。

var par = document.getElementById('my-id'); 
 

 
par.closest("#second").previousElementSibling.style.background = "yellow";

<div id="first"> 
 
    <h2>Heading</h2> 
 
    <div id="second"> 
 
    <div id="third">  
 
     <p id="my-id">This is a paragraph</p> 
 
    </div> 
 
    </div> 
 
</div>

必须指出的是，这并不在IE浏览器，并只适用于Chrome的版本41+。 Chrome 41仅在一年前发布。