在Javascript中，如何迭代getElementsByClassName（）的结果并修改显示属性

Question

How do I iterate the results of getElementsByClassName()

This is what I had:

 function togglePotentialMatchesLinks()
    {
        alert("fred");
        var els = document.getElementsByClassName("releasegroupingpotential");
        var e;
        for(e in els)
        {
            e.style.display = e.style.display=="none"
                    ?"table-row-group"
                    :"none";
        }
        return true;
    }

I have since read its not actually an array but a NodeList or a HtmlCollection , but that has left me none the wiser how to modify the function so that it works.

Update

Now working based on Trandences answer

function togglePotentialMatchesLinks()
{
    var els = document.getElementsByClassName("releasegroupingpotential");
    var e;
    for (var i = 0; i < els.length; ++i) {
        e = els[i];
        e.style.display = e.style.display=="none"
                ?"table-row-group"
                :"none";
    }
    return true;
}

Answer 1

Per the docs: https://developer.mozilla.org/en-US/docs/Web/API/NodeList

for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
}

Answer 2

Yes, it's a NodeList but that's OK. You can check for a number of properties to accomplish your goal, such as collection.item && collection.length . Here is a way to do it: http://jsbin.com/bajomi/1/edit?js,output