Javascript document.getElementsByClassName 返回未定义

Javascript document.getElementsByClassName returning undefined

提问by Ryan Durrant

I have a function which should be fairly straightforward and is supposed to be done after loading in order to reduce initial load time.

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

Basically I am using this code to get all of the elements with class "prefImg" and do some stuff with them. But when debugging in firebug, it says that the var divsList is undefined.

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

Obviously I have the breakpoint on var x = divsList.length...

显然我有断点var x = divsList.length...

I cannot understand this, I initially had the script in the Head of the page, but figuring it may have not loaded the divs yet, have moved it to the bottom of the Body. This did not solve it.

我无法理解这一点，我最初将脚本放在页面的 Head 中，但认为它可能尚未加载 div，已将其移至 Body 的底部。这并没有解决它。

I have had var divsList = document.getElementsByClassName("prefImg");

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

If anyone could tell me where I have gone wrong then I would be grateful. There are about 50 divs with the className prefImg.

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

Cheers

干杯

回答by tjscience

You can use querySelectorAll instead of getElementsByClassName:

您可以使用 querySelectorAll 而不是 getElementsByClassName：

change divsList = document.getElementsByClassName("prefImg");

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

to this divsList = document.querySelectorAll(".prefImg");

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

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

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

BTW, you do not need to declare the array divsList before you set it. Just do:

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

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

回答by Erez Avidan

do not write this code in the head.. because this means the body did not load yet. do it in the end of your body tag or use-

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

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

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

回答by Amir Kh.

Because it returns a HTMLCollection, so you should add a [number]at the end of the line:

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

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

Also it is a good idea to load this function after everything load completely by using:

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

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

回答by Gabe

This is not supported by all browsers...any browser that does not support it, you would have to implement your own.

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

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

回答by Nudier Mena

you can use an eventhandler to the load event of the window object, to run the script only when the window has finished 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();
}

回答by netzzwerg

Older browsers (like IE6, IE7, IE8) doesn′t support getElementsByClassNameand so they returns undefined.

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

In newer browsers the return value is never undefined. It is mostly a HTMLCollection(but after W3C spec it should be a NodeList).

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

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

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

But I think in your case the real problem is a bug in Firebug:

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

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

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

It is fixed and a patch is committed and will be part of Firebug 1.10a6

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