javascript - document.getElementById 循环中

Question

假设我想更改下面示例中具有类“the_class”的所有 div 的类。在循环遍历长列表(300 li 和许多嵌套的 div 标签)时添加编号 id 是一个好方法吗？或者在这种情况下 document.getElementById 会很慢吗？

由于我控制了 HTML/PHP，所以添加 ID 对我来说不是问题。但我认为“document.getElementById”每次都会循环遍历整个文档。也许其他一些方法不会每次都循环整个过程，因此速度更快？

JAVASCRIPT

var data_length = document.getElementById('the_ul').getAttribute('data-length'),
    i = 0;
while(i++ < data_length) {
    document.getElementById('id_name' + i).className = 'a_new_class';
}

HTML

<ul id=the_ul data-length="2">
    <li>
        <div>
            <div>
                <div>content1</div>
                <div id=id_name1 class=the_class>content2</div>
                <div>content3</div>
            </div>
        </div>
    </li>
    <li>
        <div>
            <div>
                <div>content1</div>
                <div id=id_name2 class=the_class>content2</div>
                <div>content3</div>
            </div>
        </div>
    </li>
</ul>

Answer 1

替代方案是 document.getElementsByClassName

var el = document.getElementsByClassName("the_class")
for (var i = 0, ilen = el.length - 1; i < ilen; i++) {
    el[i].className = "a_new_class"
}

或document.querySelectorAll

var el = document.querySelectorAll (".the_class")
for (var i = 0, ilen = el.length - 1; i < ilen; i++) {
    el[i].className = "a_new_class"
}

根据一个简单的Jsperf测试中，document.getElementsByClassName 似乎具有最佳性能。