1

假设我想在下面的示例中更改所有具有“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>
4

1 回答 1

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似乎有最好的性能。

于 2013-01-04T14:23:32.313 回答