1

以下の例で、クラス「the_class」を持つすべての div のクラスを変更したいとしましょう。長いリスト (300 個の li と多数のネストされた div タグ) をループするときに、番号付きの ID を追加するのは良い方法でしょうか。または、この場合、document.getElementById は遅くなりますか?

私は HTML/PHP を制御しているので、ID を追加することは私にとって問題ではありません。しかし、「document.getElementById」は毎回ドキュメント全体をループすると思います。たぶん、他の方法は毎回全体をループしないため、より高速になりますか?

ジャバスクリプト

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 に答える