JavaScript和querySelector

Question

我有这样的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> 

在Javascript中，我怎么访问的.src为每个图像？

我尝试以下，但它给了我一个错误：

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

我也试过以下，但它给了我一个错误：

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

我在做什么错？

Answer 1

尝试使用document.querySelectorAll返回全部而不是第一个可能的结果。你得到的错误（Uncaught TypeError: Cannot set property 'src' of undefined）是因为querySelector只返回找到的第一个元素，而不是数组（而元素不能像数组一样访问）。

的jQuery（灵感querySelector和querySelectorAll）总是允许您访问像阵列（$('.staticStep img')[0]作品），所以这可能是您的困惑源于。

快速的jsfiddle例如：http://jsfiddle.net/j8ZUJ/1/

Answer 2

document.querySelector返回文档因此误差范围内first element。你probalbly想尝试：document.querySelectorAll

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

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

或者你可以使用jQuery来代替。只是

o.src="whatever"; 

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

或设置SRC这里是Fiddle：

Answer 3

试试这个返回所有SRC。

Look MDN兼容性为map。