变量在for循环中变为undefined

Question

我正在与我正在努力的javascript函数作斗争.

在for循环中,我正在迭代所有带有"可见"类的元素,在该循环中我正在执行两个动作.

1. 元素[I] .removeAttribute( "类");
2. elements [i] .setAttribute("class","hidden");

出于某种原因,只有1是有效的.2产生错误说:

Uncaught TypeError: Cannot call method 'setAttribute' of undefined

即使我使用console.log记录元素[i]; 在第一个console.log调用后,该元素存在,但在第二个console.log元素[i]是'undefined'

我到底在这里错过了什么,这让我发疯,如果我的笔记本电脑不那么昂贵,那么它现在就会被打破.救命 :(

这是功能:

function hide_visable_elements()
{
    // remove body EventListener
    var body = document.getElementsByTagName("body");
    body[0].removeEventListener("click", hide_visable_elements, true);

    var elements = document.getElementsByClassName("visible");

    for (var i = 0; i < elements.length; i++)
    {
        console.log(elements[i]); // Works like a swiss clock

        elements[i].removeAttribute("class"); 

        console.log(elements[i]); // why elements[i] is 'undefined' now ???

        elements[i].setAttribute("class", "hidden"); // << turns to useless code
    }
}

Answer 1

这是因为getElementsByClassName返回a NodeList,这是实时的.也就是说,当它引用的元素发生变化时,它会自行更新.

当您class从该元素中删除该属性时NodeList,它将从该列表中删除(因为它不再具有visible类名).

您实际上不需要删除该属性.设置它也可以完成这项工作.但是因为NodeList当你操纵它包含的元素时它会发生变化,你需要向后计数它(因为每次你更改它的一个元素时,它都被移除,所以长度减少一个):

for (var i = elements.length - 1; i >= 0; i--) {
    elements[i].setAttribute("class", "hidden");
}