querySelector與getElementBy系列的區別

getElementBy系列

• document.getElementsByTagName('tag');

• document.getElementById('id');

• document.getElementsByClassName('class');

常見的獲取元素的方法有3種，分別是經過元素ID、經過標籤名字和經過類名字來獲取。
getElementById方法，這個方法將返回一個與之對應id屬性的節點對象，它是document對象特有的函數，只能經過其來調用該方法，使用方法以下:document.getElementById('idName');

getElementsByTagName方法返回一個對象數組（準確的說是HTMLCollection集合）,返回元素的順序是它們在文檔中的順序,傳遞給 getElementsByTagName() 方法的字符串能夠不區分大小寫,使用方法以下:document.getElementsByTagName(tagName);

getElementsByClassName方法獲取指定class名的元素,該方法返回文檔中全部指定類名的元素集合，做爲 NodeList 對象。NodeList 對象表明一個有順序的節點列表。NodeList 對象 咱們可經過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 因此有時使用時要指定下標，使用方法以下:document.getElementsByClassName('className');

querySelector和querySelectorAll

querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 該方法只返回匹配指定選擇器的第一個元素。

若是要返回全部匹配元素，須要使用 querySelectorAll() 方法替代．

不一樣的是 querySelector返回的是一個對象，querySelectorAll返回的一個集合(NodeList)。

querySelector和querySelectorAll的參數必須是符合 css selector 的字符串：它傳入的字符串中第一個字符不能是數字.

代碼實例：

document.querySelector("body");　　//返回body節點
document.querySelector("#k");　　//返回id爲k的節點
document.querySelector("#k span");　　//返回id爲k的節點下的第一個span節點
document.querySelector("#k").querySelector("span");　　//返回id爲k的節點下的第一個span節點

document.querySelectorAll("li");　　//返回所用tagName爲li的節點集合（NodeList）
document.querySelectorAll("div .li");　　//返回class爲li的div

 

性能對比

原理

querySelectorAll比getElementBy系列速度慢

由於querySelectorAll返回一個靜態的NodeList（深克隆）

getElementBy系列返回一個動態的實時變化的NodeList（HTMLCollection）（淺克隆，每次都返回一個指針）
因此querySelectorAll會下降性能

什麼叫靜態的？

意思是指選出的全部元素的數組，不會隨着文檔操做而改變。

用querySelector操做元素示例以下：
HTML代碼：

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
        var ul=document.querySelector('ul');
        var list=ul.querySelectorAll('li');
        for(var i=0;i<list.length;i++){
            ul.appendChild(document.createElement('li'));
        }//這個時候就建立了3個新的li，添加在ul列表上。
        console.log(list.length) //輸出的結果仍然是3，不是此時li的數量6

反觀getElement方法

        var ul=document.getElementsByTagName('ul')[0];
        var list=ul.getElementsByTagName('li');
        for(var i=0;i<5;i++){
            ul.appendChild(document.createElement('li'));
        }   
        console.log(list.length)//此時輸出的結果就是3+5=8

 

因此咱們如今應該能夠很直觀的分別出二者的區別，固然自己兩種方法還有兼容性方面的區別。另外這兩種方法都不能查找僞類元素。

測試結果

測試獲得節點集合的數據：

console.time('querySelectorAll');
for (var i = 0; i < 10000; i++) {
  document.querySelectorAll(".menu-top");
}
console.timeEnd('querySelectorAll');
//querySelectorAll: 1781ms

console.time('getElementsByClassName');
for (var i = 0; i < 10000; i++) {
  document.getElementsByClassName("menu-top");
}
console.timeEnd('getElementsByClassName');
//getElementsByClassName: 54ms

 

獲得集合時間對比相差巨大。但是如今主流框架，好比jquery，手機上的框架jqmobi等內部實現查找元都是使用的 querySelector等方法，性能低的方法被使用惟一理由就是 它用着方便。

 總結

在使用的時候getElement這種方法性能比較好，query選擇符則比較方便．

• 獲得的元素不是須要很麻煩的屢次getElementBy..的話，儘可能使用getElementBy..,由於他快些。
• 獲得的元素須要很麻煩的屢次getElementBy..組合才能獲得的話使用querySelector，方便。
• 看實際狀況，你決定方便優先仍是性能優先，

 

參考：

https://blog.csdn.net/levinhax/article/details/71274456

https://www.imooc.com/article/13027

https://www.jianshu.com/p/421f6d0a9419

https://blog.csdn.net/hualimeme/article/details/44410895