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在文档中返回第一元素，因此出现错误。你很可能想尝试一下：document.querySelectorAll

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

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

或者你可以用jQuery代替。

Answer 3

尝试此方法返回所有src：

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

或将src设置为

o.src="whatever";

这是小提琴。

查看MDN以获得map的兼容性。