Javascript document.getElementsByClassName返回undefined

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");

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

干杯

Answer 1

您可以使用querySelectorAll而不是getElementsByClassName:

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

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

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

顺便说一下,在设置数组之前,不需要声明数组divsList.做就是了:

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

Answer 2

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

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