parentElement.parentElement.parentElement...备选方案？

Question

我需要通过位于所有 HTML 元素内部的按钮执行的函数访问我的 HTML 元素中最外部 div 的 ID .

我正在使用 e.target.parentElement.parentElement.parentElement.parentElement.parentElement.id 它有效，但对我来说它看起来很丑。

还有其他方法可以跨越那么多父元素吗？

Answer 1

在现代浏览器中，您可以使用 Element.closest(selectors)

document.querySelector('button').addEventListener('click', function(){
   console.log('Container id:', this.closest('.container').id);
})

<div class="container" id="one">
  <div>
    <div>
       <button>Click me</button>
    </div>
  </div>

</div>