querySelector和getElementById之間的區別

居老師的狗子發表於2019-05-23

一、概述

　　今天在看js的時候發現裡面的程式碼基本上都是用querySelector()和querySelectorAll()來獲取元素，就有點疑惑為什麼不用getElementById(),可能也是因為自己沒用過那兩個，所以並不清楚原因所在。

　　參考手冊上寫querySelector() 方法返回文件中匹配指定 CSS 選擇器的一個元素，並且其語法document.querySelector(CSS selectors)接收的引數，可以指定一個或多個匹配元素的 CSS 選擇器，可以使用它們的 id, 類, 型別, 屬性, 屬性值等來選取元素，對於多個選擇器，使用逗號隔開，返回一個匹配的元素。

　　而且既然都可以實現元素的獲取，而且都可以通過id、類等等來獲取，為什麼我們時常用的都是getElementById()，getElementsByClassName()而非那兩個？

二、有關getElement(s)Byxxxx的用法

　　(1)getElementById()

　　該方法將返回一個與之對應id屬性的節點物件，它是document物件特有的函式，只能通過其來呼叫該方法。

　  (2)getElementsByTagName()

　　該方法返回一個物件陣列（是HTMLCollection集合）,返回元素的順序是它們在文件中的順序,傳遞給 getElementsByTagName() 方法的字串可以不區分大小寫。
　　如下：

（3）getElementsByClassName（）

　　該方法來獲取指定class名的元素,該方法返回文件中所有指定類名的元素集合，作為 NodeList 物件。NodeList 物件代表一個有順序的節點列表。NodeList 物件 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 所以有時使用時要指定下標。

三、有關querySelector()和querySelectorAll()的用法

（一）querySelector()

　　方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 返回指定元素節點的子樹中匹配選擇器的集合中的第一個元素，如果沒有匹配返回null。如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代．
　　由於querySelector是按css規範來實現的，所以它傳入的字串中第一個字元不能是數字。

（二）querySelectorAll()

　　按文件順序返回指定元素節點的子樹中匹配選擇器的元素集合（NodeList），如果沒有匹配返回空集合。
　　如下：

四、兩者區別及相應示例程式碼

　　一般說的都是getElement(s)Byxxxx獲取的是動態集合，querySelector獲取的是靜態集合。不知道別人對這句話是不是看了就明白它們的區別，我是在寫了相關程式碼才get到。

　　示例：（1）

<body>
<ul id="box">
    <li class="a">測試1</li>
    <li class="a">測試2</li>
    <li class="a">測試3</li>
</ul>
</body>
<script type="text/javascript">
//獲取到ul，為了之後動態的新增li
    var ul = document.getElementById('box');
//獲取到現有ul裡面的li
    var list = ul.getElementsByTagName('li');
     for(var i =0;i<list.length;i++){
        ul.appendChild(document.createElement('li')); //動態追加li
    }
</script>

　　上述程式碼會陷入死迴圈，主要是紅色背景的那個迴圈條件，因為在第一次獲取到裡面的3個li後，每當你往ul裡新增了新元素後，list便會更新其值，從新獲取ul裡的所有li。也就是getElement(s)Byxxxx獲取的是動態集合，它總會隨著dom結構的變化而變化。

　　也就是說每一次呼叫list都會重新對文件進行查詢，導致無限迴圈的問題

　　示例：（1）修改

一般說的都是getElement(s)Byxxxx獲取的是動態集合，querySelector獲取的是靜態集合。不知道別人對這句話是不是看了就明白它們的區別，我是在寫了相關程式碼才get到。
<body>
<ul id="box">
    <li class="a">測試1</li>
    <li class="a">測試2</li>
    <li class="a">測試3</li>
</ul>
</body>
<script type="text/javascript">
//獲取到ul，為了之後動態的新增li
    var ul = document.getElementById('box');
//獲取到現有ul裡面的li
    var list = ul.getElementsByTagName('li');
     for(var i =0;i<4;i++){
        ul.appendChild(document.createElement('li')); //動態追加li
    }
console.log(list.length); //7
</script>

　　將for迴圈條件修改後，新在ul裡新增了4個元素，所有現在列印出來的長度為7。

示例：（2） 

<body>
<ul id="box">
    <li class="a">測試1</li>
    <li class="a">測試2</li>
    <li class="a">測試3</li>
</ul>
</body>
<script type="text/javascript">
//獲取到ul，為了之後動態的新增li
     var ul = document.querySelector('ul');
//獲取到現有ul裡面的所有li
     var list = ul.querySelectorAll('li');
     for(var i = 0;i<list.length;i++){
         ul.appendChild(document.createElement('li'));//動態追加li
     }
console.log(list.length); //輸出的結果仍然是3，不是此時li的數量6
</script>

　　上述程式碼靜態集合體現在.querySelectorAll('li')獲取到ul裡所有li後，不管後續再動態新增了多少li，都是不會對其引數影響。

五、瀏覽器相容性及兩者的效能

（待補....）





相關文章