解析JavaScript中 querySelector 與 getElementById 方法的區(qū)別
1. 概述
在看代碼的時候發(fā)現(xiàn)基本上都是用 querySelector() 和 querySelectorAll() 來獲取元素，疑惑為什么不用 getElementById()。
可能因為自己沒用過那兩個，所以并不清楚原因所在。
1.1 querySelector() 和 querySelectorAll() 的用法
querySelector() 方法
定義： querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素；
注意： querySelector() 方法僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請用 querySelectorAll() 方法替代；
語法： document.querySelector(CSS selectors)；
參數(shù)值： String 必須。指定一個或多個匹配元素的 CSS 選擇器。使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。
對于多個選擇器，使用逗號隔開，返回一個匹配的元素。
返回值: 匹配指定 CSS 選擇器的第一個元素。 如果沒有找到，返回 null。如果指定了非法選擇器則 拋出 SYNTAX_ERR 異常。
querySelectorAll() 方法
定義： querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對象；
NodeList 對象表示節(jié)點的集合。可以通過索引訪問，索引值從 0 開始；
提示: 可使用 NodeList 對象的 length 屬性來獲取匹配選擇器的元素屬性，然后遍歷所有元素，從而獲取想要的信息；
語法： elementList = document.querySelectorAll(selectors);
elementList 是一個靜態(tài)的 NodeList 類型的對象；
selectors 是一個由逗號連接的包含一個或多個 CSS 選擇器的字符串；
參數(shù)值： String 必須。指定一個或多個匹配 CSS 選擇器的元素。可以通過 id, class, 類型, 屬性, 屬性值等作為選擇器來獲取元素。
多個選擇器使用逗號(,)分隔。
返回值: 一個 NodeList 對象，表示文檔中匹配指定 CSS 選擇器的所有元素。
NodeList 是一個靜態(tài)的 NodeList 類型的對象。如果指定的選擇器不合法，則拋出一個 SYNTAX_ERR 異常。
1.2 getElement(s)Byxxxx 的用法
getElementById() 方法
定義： getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。
如果沒有指定 ID 的元素返回 null;
如果存在多個指定 ID 的元素則返回第一個;
如果需要查找到那些沒有 ID 的元素，你可以考慮通過CSS選擇器使用 querySelector();
語法: document.getElementById(elementID);
參數(shù)值： String 必須。元素ID屬性值。
返回值: 元素對象 指定ID的元素
getElementsByTagName() 方法
定義： getElementsByTagName() 方法可返回帶有指定標(biāo)簽名的對象的集合；
提示： 參數(shù)值 "*" 返回文檔的所有元素；
語法： document.getElementsByTagName(tagname)
參數(shù)： String 必須 要獲取元素的標(biāo)簽名；
返回值： NodeList 對象 指定標(biāo)簽名的元素集合
getElementsByClassName() 方法
定義： getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
NodeList 對象代表一個有順序的節(jié)點列表。NodeList 對象 可通過節(jié)點列表中的節(jié)點索引號來訪問表中的節(jié)點(索引號由0開始)。
提示： 可使用 NodeList 對象的 length 屬性來確定指定類名的元素個數(shù)，并循環(huán)各個元素來獲取需要的那個元素。
語法： document.getElementsByClassName(classname)
參數(shù)： String 必須 需要獲取的元素類名。 多個類名使用空格分隔，如 "test demo"；
返回值： NodeList 對象，表示指定類名的元素集合。元素在集合中的順序以其在代碼中的出現(xiàn)次序排序。
2. 區(qū)別
2.1 getElement(s)Byxxxx 獲取的是動態(tài)集合，querySelector 獲取的是靜態(tài)集合
動態(tài)就是選出的元素會隨文檔改變，靜態(tài)的不會 取出來之后就和文檔的改變無關(guān)了。
示例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，為了之后動態(tài)的添加li
var ul = document.getElementById('box');
//獲取到現(xiàn)有ul里面的li
var list = ul.getElementsByTagName('li');
for(var i =0; i < list.length; i++){
ul.appendChild(document.createElement('li')); //動態(tài)追加li
}
</script>
上述代碼會陷入死循環(huán)，i < list.length 這個循環(huán)條件。
因為在第一次獲取到里面的 3 個 li 后，每當(dāng)往 ul 里添加了新元素后，list便會更新其值，重新獲取ul里的所有l(wèi)i。
也就是 getElement(s)Byxxxx 獲取的是動態(tài)集合，它總會隨著 dom 結(jié)構(gòu)的變化而變化。
也就是每一次調(diào)用 list 都會重新對文檔進行查詢，導(dǎo)致無限循環(huán)的問題。
示例1 修改：
將 for 循環(huán)條件修改為 i < 4，結(jié)果 在 ul 里新添加了4個元素，所有現(xiàn)在插入的 li 標(biāo)簽數(shù)量是7。
<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">
var ul = document.getElementById('box');
var list = ul.getElementsByTagName('li');
for(var i = 0; i < 4; i++){
ul.appendChild(document.createElement('li'));
}
console.log('list.length：',list.length);
</script>
示例2：
下述代碼靜態(tài)集合體現(xiàn)在 .querySelectorAll(‘li') 獲取到 ul 里所有 li 后，不管后續(xù)再動態(tài)添加了多少 li，都是不會對其參數(shù)影響。
<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">
var ul = document.querySelector('ul');
var list = ul.querySelectorAll('li');
for(var i = 0; i < list.length; i++){
ul.appendChild(document.createElement('li'));
}
console.log('list.length：',list.length); //輸出的結(jié)果仍然是 3，不是此時 li 的數(shù)量 6
</script>
為什么要這樣設(shè)計呢？
在 W3C 規(guī)范中對 querySelectorAll 方法有明確規(guī)定：
The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).
我們再看看在 Chrome 上面是個什么樣的情況：
document.querySelectorAll('a').toString(); // return "[object NodeList]"
document.getElementsByTagName('a').toString(); // return "[object HTMLCollection]"
HTMLCollection 在 W3C 的定義如下：
An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
實際上，HTMLCollection 和 NodeList 十分相似，都是一個動態(tài)的元素集合，每次訪問都需要重新對文檔進行查詢。
區(qū)別：HTMLCollection 屬于 Document Object Model HTML 規(guī)范，而 NodeList 屬于 Document Object Model Core 規(guī)范。
這樣說有點難理解，看看下面的例子會比較好理解：
var ul = document.getElementsByTagName('ul')[0],
lis1 = ul.childNodes,
lis2 = ul.children;
console.log(lis1.toString(), lis1.length); // "[object NodeList]" 11
console.log(lis2.toString(), lis2.length); // "[object HTMLCollection]" 4
NodeList 對象會包含文檔中的所有節(jié)點，如 Element、Text 和 Comment 等；
HTMLCollection 對象只會包含文檔中的 Element 節(jié)點；
另外，HTMLCollection 對象比 NodeList 對象 多提供了一個 namedItem 方法；
因此在瀏覽器中，querySelectorAll 的返回值是一個靜態(tài)的 NodeList 對象，而 getElementsBy 系列的返回值實際上是一個 HTMLCollection 對象 。
2.2 接收的參數(shù)不同
querySelectorAll 方法接收的參數(shù)是一個 CSS 選擇符；
getElementsBy 系列接收的參數(shù)只能是單一的 className、tagName 和 name；
var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');
注意：querySelectorAll 所接收的參數(shù)是必須嚴(yán)格符合 CSS 選擇符規(guī)范的
下面這種寫法，將會拋出異常（CSS 選擇器中的元素名，類和 ID 均不能以數(shù)字為開頭）。
try {
var e1 = document.getElementsByClassName('1a2b3c');
var e2 = document.querySelectorAll('.1a2b3c');
} catch (e) {
console.error(e.message);
}
console.log(e1 && e1[0].className);
console.log(e2 && e2[0].className);
2.3 瀏覽器兼容不同
querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 支持 ；
getElementsBy 系列，以最遲添加規(guī)范中的 getElementsByClassName 為例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已經(jīng)支持；
2.4 querySelector 屬于 W3C 中的 Selectors API 規(guī)范 ，而 getElementsBy 系列屬于 W3C 的 DOM 規(guī)范
參考文章 （侵刪）
到此這篇關(guān)于JavaScript中 querySelector 與 getElementById 方法的區(qū)別的文章就介紹到這了,更多相關(guān)js中 querySelector 與 getElementById 方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS函數(shù)進階之繼承用法,結(jié)合實例形式分析了JavaScript函數(shù)繼承相關(guān)定義與使用操作技巧,需要的朋友可以參考下2020-01-01
js 動態(tài)為textbox添加下拉框數(shù)據(jù)源的方法
這篇文章主要介紹了js 動態(tài)為textbox添加下拉框數(shù)據(jù)源的方法,需要的朋友可以參考下2014-04-04
為了吸引更多的用戶，設(shè)計好一個分享海報還是很有必要的，這篇文章主要介紹了微信小程序分享海報生成的實現(xiàn)方法，非常具有實用價值，需要的朋友可以參考下2018-12-12
七行JSON代碼把你的網(wǎng)站變成移動應(yīng)用過程詳解
這篇文章主要介紹了七行JSON代碼把你的網(wǎng)站變成移動應(yīng)用過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值2019-07-07
JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
javascript監(jiān)聽鼠標(biāo)滾輪事件淺析
這篇文章主要介紹了javascript監(jiān)聽鼠標(biāo)滾輪事件淺析,使用具體例子說明,同時考慮了不同的瀏覽器,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JS簡單生成由字母數(shù)字組合隨機字符串,結(jié)合實例形式分析了javascript使用Math.random()生成隨機字符串相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JavaScript運動原理基礎(chǔ)知識詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04
基于JavaScript實現(xiàn)網(wǎng)紅太空人表盤的完整代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)網(wǎng)紅太空人表盤的完整代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要給大家介紹了關(guān)于JavaScript中引用vs復(fù)制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12