JS中如何遍历DOM？

Question

I have a function that I call to get the data of the alt attribute when an image is clicked. Here's the function-

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")
    }

I would like to know how can I traverse upwards to get the data in the 'h2' tag of the same section after my function is called.

Here's the structure of the section-

<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>

Any help is appreciated. Thanks in advance for your help.

Answer 1

Use parentNode to get the parent node and query the h2 tag.

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")
    }
})