6

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

基本上我正在使用这段代码来获取类“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 个带有 className 的 div prefImg。

干杯

4

6 回答 6

6

您可以使用 querySelectorAll 代替 getElementsByClassName：

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

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

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

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

var divsList = document.querySelectorAll(".prefImg");
于 2012-06-27T21:41:13.460 回答
2

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

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

于 2013-02-15T23:09:12.183 回答
0

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

 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-27T21:53:28.943 回答
0

较旧的浏览器（如 IE6、IE7、IE8）不支持getElementsByClassName，因此它们返回undefined.

在较新的浏览器中，返回值是 never undefined。它主要是 a HTMLCollection（但在 W3C 规范之后它应该是 a NodeList）。

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

但我认为在你的情况下，真正的问题是 Firebug 中的一个错误：

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

它已修复并提交了一个补丁，并将成为Firebug 1.10a6的一部分

于 2012-06-27T23:18:46.030 回答
0

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

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

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

window.load = function() {
    populatePrefsList();
}
于 2020-05-23T07:06:30.940 回答
-1

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

function getElementsByClassName(node,classname) {
    if (node.getElementsByClassName)
        return node.getElementsByClassName(classname);
    else {
        // custom
    }
}
于 2012-06-27T21:38:20.700 回答