Javascript document.getElementsByClassName 返回未定义答案

【问题标题】：Javascript document.getElementsByClassName returning undefinedJavascript document.getElementsByClassName 返回未定义
【发布时间】：2012-06-27 21:34:57
【问题描述】：

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

基本上，我使用这段代码来获取所有具有“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");

如果有人能告诉我哪里出错了，我将不胜感激。类名为prefImg 的div 大约有50 个。

干杯

【问题讨论】：

您是否正在使用 Firebug 在 FF 3+ 中调试此脚本？
你用什么浏览器，是FF的吗？
是的，最新的 FF 与 Firebug 1.9.2。
用这个var divsList = [];代替这个var divsList = new Array();

标签： javascript html

【解决方案1】：

您可以使用 querySelectorAll 代替 getElementsByClassName：

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

到这个divsList = document.querySelectorAll(".prefImg");

演示 - http://jsfiddle.net/ya3gU/

顺便说一句，您不需要在设置之前声明数组 divsList。做吧：

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

【讨论】：

它仍然声称是未定义的，但有趣的是，它现在声称它的长度为 48，这可能意味着它已定义，它是 Firebug 的问题吗？请注意，就实际功能而言，它现在也有效。调试它只是有点痛苦。
我完全不确定这如何回答这个问题。
对于一些调试器，querySelectorAll 返回的结果集合显示为未定义。我认为这是因为返回的值是 NodeList 而不是标准 Array。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以对窗口对象的加载事件使用事件处理程序，仅在窗口完成加载时运行脚本

 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();
}

【讨论】：

【解决方案4】：

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

的一部分

【讨论】：

【解决方案5】：

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

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

此外，在所有内容完全加载后加载此函数也是一个好主意：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：