javascript - 如何使用javascript获取 anchor 标记内的img标记的src？

Question

Html 代码如下，我有更多这些标签，因此类:

<a class = "openmodal">
   <img class="case" src="aqua.jpg>
   <h4>Aqua</h4>        
</a>

javascript如下，基本上我想抓取img标签，以便我可以获得它的src:

var btns = document.getElementsByClassName("openmodal");
for(let i=0;i<btns.length;i++){
    var x = btns[i].firstChild;
    console.log(x);
   btns[i].onclick = function() {
      modal.style.display = "block";
   }
}

Answer 1

使用querySelectorAll

   // will give all anchor tag with this class
var btns = document.querySelectorAll(".openmodal");
// iterating this collection
for (let i = 0; i < btns.length; i++) {
  // inside this element it is querying for img tag & adding event listener to it
  btns[i].querySelector('img').addEventListener('click', function() {
    // get the src attribute from it
    var m = this.getAttribute('src');
    console.log(m)
  })
}

<a class="openmodal">
  <img class="case" src="aqua.jpg" alt="img">
  <h4>Aqua</h4>
</a>

<a class="openmodal">
  <img class="case2" src="aqua2.jpg" alt="img">
  <h4>Aqua2</h4>
</a>