2017-05-11 78 views
0

JavaScript新手在這裏,溫柔的要求。我使用的JavaScript資源似乎都表示document.images是對頁面上img元素的引用的數組(更新:除非它不是數組;請參閱下面的Badacadabra的回答)。這是再清楚不過,所以要鑽它,我寫this爲什麼document.images包含的不僅僅是圖像引用?

<!DOCTYPE html> 
<html> 
<body> 
    <img src="http://java2s.com/style/demo/border.png" width="150" height="113"> 
    <img src="http://java2s.com/style/demo/border.png" width="150" height="113">  
    <img src="http://java2s.com/style/demo/border.png" width="150" height="113"> 
    <p><button onclick="myFunction()">test</button></p> 
    <p id="demo"></p> 

    <script> 
    function myFunction() { 
     image_report = "" 
     for (i in document.images) { 
     image_report = image_report + document.images[i].src + "<br>"; 
     } 
     document.getElementById("demo").innerHTML = image_report; 
    } 
    </script> 
</body> 
</html> 

但是,而不是隻會得到一個爲頁的三個圖像src值的列表中,我也得到三個對象進行src未定義:

http://java2s.com/style/demo/border.png 
http://java2s.com/style/demo/border.png 
http://java2s.com/style/demo/border.png 
undefined 
undefined 
undefined 

那是什麼,他們在那裏做什麼?爲什麼不解釋,例如,here?我可能錯過了關於for...in如何工作?

+1

_ 「難道我可能失去了一些東西有關如何爲'... in'工作的?」 _'document.images [ 「長度」。 src','document.images [「item」]。src','document.images [「namedItem」] .src'是'undefined'。你可以通過在'for..in'循環中加入'console.log(i)'來驗證。 – guest271314

回答

1

您可以使用它代替:

document.getElementsByTagName('img') 
+0

有用,我在我的研究中遇到過這種情況,但我仍然好奇最後追加的這三個物體在那裏做什麼...... – globewalldesk

1

document.images的數組。

console.log(Array.isArray(document.images));

document.images的HTMLCollection,這是一個陣列狀物體。類似數組的對象看起來像一個數組(鍵是數字),具有長度屬性,但不是Array的實例,並且無法訪問Array.prototype方法。

此代碼應該工作,順便說一句:

for (var i = 0; i < document.images.length; i++) { 
    console.log(document.images[i].src); 
} 
2

for...in語句遍歷 對象的枚舉的屬性

for..in也越來越.length.item.namedItem性質document.images

您也可以使用for..of循環

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <img src="http://java2s.com/style/demo/border.png" width="150" height="113"> 
 
    <img src="http://java2s.com/style/demo/border.png" width="150" height="113">  
 
    <img src="http://java2s.com/style/demo/border.png" width="150" height="113"> 
 
    <p><button onclick="myFunction()">test</button></p> 
 
    <p id="demo"></p> 
 

 
    <script> 
 
    function myFunction() { 
 
     image_report = "" 
 
     for (let image of document.images) { 
 
     image_report = image_report + image.src + "<br>"; 
 
     } 
 
     document.getElementById("demo").innerHTML = image_report; 
 
    } 
 
    </script> 
 
</body> 
 
</html>

相關問題