早期的元素選擇方法

1、document.getElementById();2、document.getElementsByName();3、document.getElementsByTagName();4、document.getElementsByClassName; 復(fù)制代碼

html5提供的selector選擇方法

1、document.querySelector();2、document.querySelectorAll(); 復(fù)制代碼

他們之間的區(qū)別

• 1、前者所得到的元素是動(dòng)態(tài)集合，而后者得到的是一個(gè)靜態(tài)集合

• 2、前者獲取dom節(jié)點(diǎn)的性能比后者快。

說明：前者對(duì)dom節(jié)點(diǎn)進(jìn)行選擇時(shí)，其實(shí)獲取到的是dom結(jié)構(gòu)的緩存，后者獲取到的是一個(gè)快照，這也就是為什么后者獲取的dom節(jié)點(diǎn)是靜態(tài)集合。另外，后者的本質(zhì)是使用css選擇器對(duì)節(jié)點(diǎn)進(jìn)行獲取，那么它首先會(huì)分析選擇器的結(jié)構(gòu)，然后遍歷整個(gè)dom文檔結(jié)構(gòu)進(jìn)行節(jié)點(diǎn)的匹配，因此更耗性能。

性能比對(duì)

方法：對(duì)dom中一個(gè)id為container的div進(jìn)行大量的選擇

• 使用document.getElementById，刷新頁(yè)面10次，獲得每次獲取節(jié)點(diǎn)的時(shí)間分別為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 復(fù)制代碼

• 使用document.querySelector()，刷新頁(yè)面10次，獲得每次獲取節(jié)點(diǎn)的時(shí)間分別為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 復(fù)制代碼

總結(jié)：由上可知前者和后者選取dom節(jié)點(diǎn)的性能還是有差距的，這也就是為什么在html5中出現(xiàn)了querySelector和querySelectorAll兩個(gè)如此方便的dom選擇方法后還依舊保存了之前的方法。另外，對(duì)于二者的區(qū)別1，動(dòng)態(tài)集合的概念是dom中的改變會(huì)同時(shí)反映到j(luò)s中，而靜態(tài)集合卻不會(huì)，常見的靜態(tài)集合還有jQuery所選取的元素。

總結(jié)

以上是生活随笔為你收集整理的dom选择方法的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。