document.getElementById in循環

假設我想在下面的例子中改變所有具有類「the_class」的div的類。在循環一個長列表（300 li和許多嵌套的div標籤）時，添加編號的id是否會是一種好方法。或者在這種情況下document.getElementById會變慢？document.getElementById in循環

由於我控制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>

來源

2013-01-04 user1087110

請參見[getElementsByClassName]（https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName）或[querySelectorAll]（https://developer.mozilla.org/en-US/docs /DOM/Document.querySelectorAll）。注意瀏覽器限制。 – jbabey

謝謝jbabey。你的意思是getElementsByClassName會比我的方法更快嗎？ – user1087110

另一種方法是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-04 14:23:32 C5H8NNaO4

IE 9支持getElementsByClassName每個http://caniuse.com/getelementsbyclassname –

@TonyAdams哦，我不知道當時我在想什麼時候寫了anser ..謝謝你的評論！ :)這真的是一個總體不好的答案。 *恥辱我*。 – C5H8NNaO4

document.getElementById in循環

回答

相關問題