parentElement.parentElement.parentElement... 替代方案？

问题描述

我需要从所有 HTML 元素最内部的按钮执行的函数中访问 HTML 元素中最外部 div 的 id。

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

是否有另一种方法可以穿越这么多 parentElement？

解决方法

在现代浏览器中，您可以使用 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>