How to target child element in JavaScript

Question

How to target the img element in JavaScript to change img src.

<body>
 <div class="cover">
  <img src="img.jpg" width="60" height="60">
  </div>
</body>

This is a really basic question, you should try to google it first. — pmrotule, Jul 06 '16 at 06:19

A.Baudouin · Answer 1 · 2016-07-06T06:29:04.450

2

document.querySelector(".cover img").src = "/test/test.jpg";

please visit HTML DOM querySelector() Method for more information (compatibility, ...)

edited Jul 06 '16 at 06:29

answered Jul 06 '16 at 06:20

A.Baudouin

2,855
3
24
28

score 0 · Answer 2 · answered Jul 06 '16 at 06:20

element.querySelector('img') can get you there as well.

var cover = document.getElementsByClassName('cover')[0],
    img   = cover.querySelector('img');
img.src = 'http://placehold.it/60x60';

<div class="cover">
    <img src="img.jpg" width="60" height="60">
</div>

score 0 · Answer 3 · answered Jul 06 '16 at 06:21

First select you parent class and then using that select your child element.

var a = document.querySelector(".cover");
var b = a.querySelector("img");
b.style.width = "500px";
b.style.height = "500px";
b.src = "https://source.unsplash.com/category/nature";

score 0 · Answer 4 · answered Jul 06 '16 at 06:22

0

If you do not want to support legacy browsers you can do with with document.querySelector:

document.querySelector(".cover img").setAttribute("src", "anotherimage.png");

answered Jul 06 '16 at 06:22

thomasreiser

180
2
13

How to target child element in JavaScript

4 Answers4