使用DOM方法去除圖像元素

Question

任何人都可以解釋爲什麼remove（）方法不能按我的預期工作。我想從文檔中刪除所有img元素。 循環遍歷文檔並刪除所有圖像，這就是我想要的，但這隻能刪除2張圖像，爲什麼？ 下面是代碼JSBIN

HTML

<img src="http://www.lorempixel.com/50/50" alt="pic"> 
<img src="http://www.lorempixel.com/50/50/animals" alt="pic"> 
<img src="http://www.lorempixel.com/50/50/city" alt="pic"> 

JS

var imgElements = document.getElementsByTagName("img"); // HTMLCollection 

for(var i=0; i<imgElements.length; i++) { 
    var img = imgElements[i]; 
    img.remove(); 
} 

Answer 1

有兩件事情，我擔心有關代碼：

1. remove是一個相對較新的DOM方法，它沒有得到很好的支持。爲了更好的支持，請使用img.parentNode.removeChild(img);

2. getElementsByTagName返回現場NodeList，所以當您從列表的開頭移除元素，所有其他的上移。因此，如果列表中有5個條目，並且您刪除了i=0元素，則其他所有元素都會移動，並且現在會有一個新元素（長度爲4）。你的循環將移動到i=1，因此在i=0（原來在i=1）的元素將不會得到處理。

   對於非生命NodeList，請使用querySelectorAll('tagname')（或者只是向後循環列表，從最後刪除）。或者使用Array.prototype.slice將NodeList轉換爲數組。

   querySelectorAll得到所有現代瀏覽器和IE8的支持。

下面是一個使用querySelectorAll一個例子：

var imgElements = document.querySelectorAll("img"); // HTMLCollection 
for(var i=0; i<imgElements.length; i++) { 
    var img = imgElements[i]; 
    img.parentNode.removeChild(img); 
} 

或者只是向後計數：

var imgElements = document.getElementsByTagName("img"); // HTMLCollection 
for(var i=imgElements.length-1; i>=0; i--) { 
    var img = imgElements[i]; 
    img.parentNode.removeChild(img); 
} 

或者使用Array.prototype.slice：

var imgElements = Array.prototype.slice.call(document.getElementsByTagName("img")); 
for(var i=0; i<imgElements.length; i++) { 
    var img = imgElements[i]; 
    img.parentNode.removeChild(img); 
}