Javascript document.getElementsByClassName returns undefined

我有一個相當簡單的函數，應該在加載後完成，以減少初始加載時間。Javascript document.getElementsByClassName returns undefined

基本上我使用這段代碼來獲得類「prefImg」的所有元素，並與他們做一些事情。但是在firebug中調試時，它說var divsList是未定義的。

function populatePrefsList() 
    { 
     var divsList = new Array(); 
     divsList = document.getElementsByClassName("prefImg"); 
     var x = divsList.length; 
     var i = 0; 
     for(i=0; i<divsList.length; i++) { 
      var imgs = divsList[i].getElementsByTagName("img"); 
      var imgSRC = imgs[0].src; 
      var alt = imgs[0].alt; 
      var descs = divsList[i].getElementsByTagName("h4"); 
      var desc = descs[0].innerHTML; 
      //var thisPref = new preference(imgSRC, alt, desc); 
      //prefsList[i] = thisPref; 
     } 
    }

很顯然，我對var x = divsList.length斷點...

我不明白這一點，我最初曾在頁面頭部的腳本，但認定它可能還沒有加載的div然而，有將它移動到身體的底部。這並沒有解決它。

我有var divsList = document.getElementsByClassName("prefImg");

如果有人可以告訴我哪裏出了問題，然後我將不勝感激。有大約50個div類名prefImg。

乾杯

來源

2012-06-27 Ryan Durrant

你在FF調試這個腳本3+使用螢火蟲？ – Li0liQ

你使用哪個瀏覽器，是FF嗎？ – Bergi

是啊最新的FF與Firebug 1.9.2。 –

這不是由所有的瀏覽器都支持......不支持任何瀏覽器，你就必須實現自己的。

function getElementsByClassName(node,classname) { 
    if (node.getElementsByClassName) 
     return node.getElementsByClassName(classname); 
    else { 
     // custom 
    } 
}

來源

2012-06-27 21:38:20 Gabe

它不會拋出執行錯誤，但返回undefined他說... – Bergi

可以使用querySelectorAll代替getElementsByClassName方法：

變化divsList = document.getElementsByClassName("prefImg");

這個divsList = document.querySelectorAll(".prefImg");

DEMO - http://jsfiddle.net/ya3gU/

BTW，你不需要申報數組divsList在你設置之前它。只要做到：

var divsList = document.querySelectorAll(".prefImg");

來源

2012-06-27 21:41:13 tjscience

它仍然聲稱是未定義的，但在一個有趣的事件轉折中，它現在聲稱它的長度爲48，這可以說是它的定義，它是一個Firebug的問題？注意它也是根據實際功能現在的工作。調試它只是有點痛苦。 –

我不知道這是如何回答這個問題的。 – gdoron

對於某些調試器，querySelectorAll返回的結果集合顯示爲未定義。我相信這是由於返回的值是NodeList而不是標準Array的事實。 – tjscience

您可以使用事件處理window對象的load事件，運行腳本只有在窗口已經完成加載

function populatePrefsList() 
    { 
    var divsList = new Array(); 
    divsList = document.getElementsByClassName("prefImg"); 
    var x = divsList.length; 
    var i = 0; 
    for(i=0; i<divsList.length; i++) { 
     var imgs = divsList[i].getElementsByTagName("img"); 
     var imgSRC = imgs[0].src; 
     var alt = imgs[0].alt; 
     var descs = divsList[i].getElementsByTagName("h4"); 
     var desc = descs[0].innerHTML; 
     //var thisPref = new preference(imgSRC, alt, desc); 
     //prefsList[i] = thisPref; 
    } 
} 


window.onload = function(){ 
populatePrefsList(); 
}

來源

2012-06-27 21:53:28

舊的瀏覽器（如IE6，IE7， IE8）不支持getElementsByClassName，因此它們返回undefined。

在較新的瀏覽器中，返回值從不爲undefined。它是主要是HTMLCollection（但在W3C規範後它應該是NodeList）。

https://developer.mozilla.org/en/DOM/document.getElementsByClassName

但我認爲你的情況，真正的問題是在Firebug的錯誤：

http://code.google.com/p/fbug/issues/detail?id=5336

它是固定的，一個補丁被提交，將螢火蟲1.10a6的一部分

來源

2012-06-27 23:18:46 netzzwerg