Javascript document.getElementsByClassName 返回未定义

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，已将其移至正文的底部。这并没有解决它。

我有 var divsList = document.getElementsByClassName("prefImg");
如果有人能告诉我哪里出错了，我将不胜感激。类名 prefImg 的 div 大约有 50 个.

干杯

Answer 1

您可以使用 querySelectorAll 代替 getElementsByClassName:

更改 divsList = document.getElementsByClassName("prefImg");
对此divsList = document.querySelectorAll(".prefImg");
演示 - http://jsfiddle.net/ya3gU/

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

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