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,都是不會對其引數影響。

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

(待補....)

相關文章