JS中如何遍历DOM？

Question

我有一个 function 在单击图像时调用它以获取 alt 属性的数据。 这是功能-

document.addEventListener("click", function(e) {
    var a = e.target.closest("a[href]");
    if (a) {
       var img = e.target.closest("img[alt]")
       var alt = img.getAttribute("alt")
    }

我想知道在调用 function 之后如何向上遍历以获取同一部分的“h2”标签中的数据。

这是该部分的结构-

<section>
  <div>
    <div>
      <h2> Some data </h2>
    </div>
    <a href="#">
    <img border="0" alt="Hello there" src="test.jpg" width="100" height="100">
  </div>
</section>

任何帮助表示赞赏。 在此先感谢您的帮助。

Answer 1

使用parentNode获取父节点并查询 h2 标签。

document.addEventListener("click", function(e) {
    var a = e.target.closest("a[href]");
    if (a) {
      var parentNode = a.parentNode;
      var h2 = parentNode.querySelector('h2');
      var title = h2.innerText;
      console.log(title);
      var img = e.target.closest("img[alt]")
      var alt = img.getAttribute("alt")
    }
})