JavaScript 和 querySelector

Question

I have this HTML:

<div id="allSteps">
  <h3>Intermediate steps</h3>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image" ></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
</div>

In javaScript, how do I access the .src for each image?

I tried the following but it gives me an error:

document.querySelector(".staticStep img").src[0] = images[num][0];
document.querySelector(".staticStep img").src[1] = images[num][1];
document.querySelector(".staticStep img").src[2] = images[num][2];

I also tried the following but it gives me a an error:

document.querySelector(".staticStep img")[0].src = images[num][0];
document.querySelector(".staticStep img")[1].src = images[num][1];
document.querySelector(".staticStep img")[2].src = images[num][2];

What am I doing wrong?

Answer 1

Try using document.querySelectorAll which returns all of the possible results instead of just the first one. The error you're getting ( Uncaught TypeError: Cannot set property 'src' of undefined ) is because querySelector only returns the first element found, not an array (and elements can't be accessed like arrays).

jQuery (the inspiration for querySelector and querySelectorAll ) always allows you to access like an array ( $('.staticStep img')[0] works), so this is probably where your confusion stems from.

Quick JSFiddle example: http://jsfiddle.net/j8ZUJ/1/

Answer 2

document.querySelector returns the first element within the document thus the error. you probalbly want to try: document.querySelectorAll

var elements = document.querySelectorAll(".staticStep img");

elements[0].src  =.....
elements[1].src  =.....
elements[2].src  =.....

Or you could use jQuery instead.

Answer 3

Try this to return all src:

map = Function.prototype.call.bind([].map);
map(document.querySelectorAll(".image"), function(o){
    return o.src;
});

or set src just with

o.src="whatever";

Here is the Fiddle .

Look MDN for compatibility of map .

Answer 4

Try this code

document.querySelector('.staticStep :nth-child(i)').src = images[num][i];

where i = 0,1,2,--- ,n.