How to get the source of an image inside a div using javascript?

Question

How can I get the source of an image placed inside a div with unique id.

<div id="0a01">
   <img src = "one.jpg" />
</div>
<div id="0a02">
   <img src = "two.jpg" />
</div>
<div id="0a03">
   <img src = "three.jpg" />
</div>

I know if I had given an id to the image itself I could've got it using -

var src= document.getElementById("<id-for-image>").src;

Since I can't give an id to the image tag, that makes it tricky. Not sure how get it in this case?

Answer 1

You can use querySelector :

var src= document.querySelector("#id-for-image img").src;

Note that the selector must be compatible with the CSS norm. That means that your id must not start with a digit.

If you really can't fix your id (which is bad because it will lead to other problems), then you can use this kind of selector :

var src= document.querySelector('[id="0a03"] img').src;

Demonstration

Answer 2

If your layout will always be like that, you can use .children, like:

var i = document.getElementById("0a01").children[0].src;