Question

我有一个应该相当简单的功能，并且应该在加载后完成，以减少初始加载时间。

基本上我使用这段代码来获取类“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，已将它移动到Body的底部。这并没有解决它。

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

如果有人能告诉我哪里出错了，那么我将不胜感激。大约有50个带有className prefImg的div。

干杯

Answer 1

您可以使用querySelectorAll而不是getElementsByClassName：

更改divsList = document.getElementsByClassName("prefImg");

到此divsList = document.querySelectorAll(".prefImg");

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

顺便说一下，在设置数组之前，不需要声明数组divsList。只是做：

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

Answer 2

不要在头部写这个代码.. 因为这意味着身体还没有加载。在你的身体标签的末尾做或使用 -

window.addEventListener("load", function() { // code here });

Answer 3

并非所有浏览器都支持此功能...任何不支持它的浏览器都必须实现自己的浏览器。

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

Answer 4

你可以使用eventhandler来处理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();
}

Answer 5

较旧的浏览器（如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

它已修复且已提交补丁，并将成为 Firebug 1.10a6

的一部分

Answer 6

因为它返回一个HTMLCollection，所以您应该在该行的末尾添加一个[number]：

divsList = document.getElementsByClassName("prefImg")[0];

另外，最好使用以下方法在完全加载后加载此函数：

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

Javascript document.getElementsByClassName返回undefined

6 个答案: