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。