有没有办法使用JavaScript返回指定元素的顶部或第二个父元素？

Question

我想获得myLI id的顶级父元素（部分）。

我的HTML代码是：

<section>
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>

    </div>
</section>

我的代码是：

var x = document.getElementById("myLI").parentElement.nodeName;

我的代码返回UL，但我希望它返回section。

Answer 1

如果您想通过tagName定位父级，可以使用 .closest(selector); ，如：

var x = document.getElementById("myLI").closest('section');

注意：请查看浏览器兼容性部分。

希望这有帮助。

var x = document.getElementById("myLI").closest('section');

console.log(x.tagName);

<section>
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>

    </div>
</section>

Answer 2

var topParent = document.getElementById("myLI");
while( topParent.parentElement.nodeName != 'BODY' ){ 
  topParent = topParent.parentElement;
  }
  console.log( topParent.nodeName );

<section>
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>

    </div>
</section>

所以我假设你想要'BODY'元素之前的元素？

Answer 3

“当用户点击单选按钮或某种类型的点击时，我可能会执行它。”

然后只需在section元素上设置click事件：

var sections = Array.prototype.slice.call(document.querySelectorAll("section"));

sections.forEach(function(section){
  section.addEventListener("click", function(){
    console.log(this.id);
  });
});

<section id="one">
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>
    </div>
</section>
<section id="two">
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>
    </div>
</section>
<section id="three">
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>
    </div>
</section>