querySelector和getElementById之間的區別

時間 2019-12-09

標籤 queryselector getelementbyid 之間區別简体版

原文原文鏈接

1、概述

　　今天在看js的時候發現裏面的代碼基本上都是用querySelector()和querySelectorAll()來獲取元素，就有點疑惑爲何不用getElementById(),可能也是由於本身沒用過那兩個，因此並不清楚緣由所在。javascript

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

　　並且既然均可以實現元素的獲取，並且均可以經過id、類等等來獲取，爲何咱們時經常使用的都是getElementById()，getElementsByClassName()而非那兩個？java

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

　　(1)getElementById()

　　該方法將返回一個與之對應id屬性的節點對象，它是document對象特有的函數，只能經過其來調用該方法。

　 (2)getElementsByTagName()

　　該方法返回一個對象數組（是HTMLCollection集合）,返回元素的順序是它們在文檔中的順序,傳遞給 getElementsByTagName() 方法的字符串能夠不區分大小寫。

　　以下：

（3）getElementsByClassName（）

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

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

（一）querySelector()

　　方法返回匹配指定 CSS 選擇器元素的第一個子元素。返回指定元素節點的子樹中匹配選擇器的集合中的第一個元素，若是沒有匹配返回null。若是要返回全部匹配元素，須要使用 querySelectorAll() 方法替代．

　　因爲querySelector是按css規範來實現的，因此它傳入的字符串中第一個字符不能是數字。

（二）querySelectorAll()

　　按文檔順序返回指定元素節點的子樹中匹配選擇器的元素集合（NodeList），若是沒有匹配返回空集合。

　　以下：

4、二者區別及相應示例代碼

　　通常說的都是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結構的變化而變化。app

　　也就是說每一次調用list都會從新對文檔進行查詢，致使無限循環的問題dom

　　示例：（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，都是不會對其參數影響。性能

5、瀏覽器兼容性及二者的性能

（待補....）測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。