javascript - 如何遍历 DOM 直到到达一个类？

Question

我有这样的 HTML:

<div id="hooray" class="section">
   <div>
      <div>
        <div id="click">click</div>
      </div>
   </div>
 </div>

当我点击 div与类 click , 我想向上移动 DOM 直到到达最近的 section并捕获 id .

对于 JQuery，我会使用类似 $().closest('div.section') 的东西，但是我如何在每个 parentNode 中使用纯 Javascript 而不进行硬编码来做到这一点？ ？

var node = document.getElementById('click').parentNode.parentNode....etc

Answer 1

你可以只使用Element.closest() :

let closestElement = document.getElementById('click').closest('.section');

下面是一个片段来展示它的实际效果:

console.log(document.getElementById('click').closest('.section').id);

<div id="hooray" class="section">
   <div>
      <div>
        <div id="click">click</div>
      </div>
   </div>
 </div>