dom選擇方法的區別

LFE發表於2018-08-15
早期的元素選擇方法
1、document.getElementById();

2、document.getElementsByName();

3、document.getElementsByTagName();

4、document.getElementsByClassName;
複製程式碼
html5提供的selector選擇方法
1、document.querySelector();

2、document.querySelectorAll();
複製程式碼
他們之間的區別

  • 1、前者所得到的元素是動態集合，而後者得到的是一個靜態集合

  • 2、前者獲取dom節點的效能比後者快。

說明：前者對dom節點進行選擇時，其實獲取到的是dom結構的快取，後者獲取到的是一個快照，這也就是為什麼後者獲取的dom節點是靜態集合。另外，後者的本質是使用css選擇器對節點進行獲取，那麼它首先會分析選擇器的結構，然後遍歷整個dom文件結構進行節點的匹配，因此更耗效能。

效能比對

方法：對dom中一個id為container的div進行大量的選擇

  • 使用document.getElementById，重新整理頁面10次，獲得每次獲取節點的時間分別為38,34,35,33,34,33,34,32,32,33（毫秒）
var start=new Date(),end;
for (var i = 0; i < 1000000; i++) {
    document.getElementById('container');
}
end=new Date();
console.log(end-start);//38,34,35,33,34,33,34,32,32,33
複製程式碼
  • 使用document.querySelector()，重新整理頁面10次，獲得每次獲取節點的時間分別為101,98,87,91,94,93,88,93,89,89（毫秒）
var start=new Date(),end;
for (var i = 0; i < 1000000; i++) {
    document.querySelector('#container');
}
end=new Date();
console.log(end-start);//101,98,87,91,94,93,88,93,89,89
複製程式碼

總結：由上可知前者和後者選取dom節點的效能還是有差距的，這也就是為什麼在html5中出現了querySelector和querySelectorAll兩個如此方便的dom選擇方法後還依舊儲存了之前的方法。另外，對於二者的區別1，動態集合的概念是dom中的改變會同時反映到js中，而靜態集合卻不會，常見的靜態集合還有jQuery所選取的元素。

相關文章