溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript中querySelector與getElementById方法的區(qū)別是什么”，在日常操作中，相信很多人在JavaScript中querySelector與getElementById方法的區(qū)別是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中querySelector與getElementById方法的區(qū)別是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
在看代碼的時(shí)候發(fā)現(xiàn)基本上都是用 querySelector() 和 querySelectorAll() 來獲取元素，疑惑為什么不用 getElementById()。
可能因?yàn)樽约簺]用過那兩個(gè)，所以并不清楚原因所在。
querySelector() 方法
定義： querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素；
注意： querySelector() 方法僅返回匹配指定選擇器的第一個(gè)元素。如果你需要返回所有的元素，請用 querySelectorAll() 方法替代；
語法： document.querySelector(CSS selectors)；
參數(shù)值： String 必須。指定一個(gè)或多個(gè)匹配元素的 CSS 選擇器。使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。
對于多個(gè)選擇器，使用逗號隔開，返回一個(gè)匹配的元素。
返回值: 匹配指定 CSS 選擇器的第一個(gè)元素。 如果沒有找到，返回 null。如果指定了非法選擇器則 拋出 SYNTAX_ERR 異常。
querySelectorAll() 方法
定義： querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對象；
NodeList 對象表示節(jié)點(diǎn)的集合?？梢酝ㄟ^索引訪問，索引值從 0 開始；
提示: 可使用 NodeList 對象的 length 屬性來獲取匹配選擇器的元素屬性，然后遍歷所有元素，從而獲取想要的信息；
語法： elementList = document.querySelectorAll(selectors);
elementList 是一個(gè)靜態(tài)的 NodeList 類型的對象；
selectors 是一個(gè)由逗號連接的包含一個(gè)或多個(gè) CSS 選擇器的字符串；
參數(shù)值： String 必須。指定一個(gè)或多個(gè)匹配 CSS 選擇器的元素?？梢酝ㄟ^ id, class, 類型, 屬性, 屬性值等作為選擇器來獲取元素。
多個(gè)選擇器使用逗號(,)分隔。
返回值: 一個(gè) NodeList 對象，表示文檔中匹配指定 CSS 選擇器的所有元素。
NodeList 是一個(gè)靜態(tài)的 NodeList 類型的對象。如果指定的選擇器不合法，則拋出一個(gè) SYNTAX_ERR 異常。
getElementById() 方法
定義： getElementById() 方法可返回對擁有指定 ID 的第一個(gè)對象的引用。
如果沒有指定 ID 的元素返回 null;
如果存在多個(gè)指定 ID 的元素則返回第一個(gè);
如果需要查找到那些沒有 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 對象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對象 可通過節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號來訪問表中的節(jié)點(diǎn)(索引號由0開始)。
提示： 可使用 NodeList 對象的 length 屬性來確定指定類名的元素個(gè)數(shù)，并循環(huán)各個(gè)元素來獲取需要的那個(gè)元素。
語法： document.getElementsByClassName(classname)
參數(shù)： String 必須 需要獲取的元素類名。 多個(gè)類名使用空格分隔，如 "test demo"；
返回值： NodeList 對象，表示指定類名的元素集合。元素在集合中的順序以其在代碼中的出現(xiàn)次序排序。
動(dòng)態(tài)就是選出的元素會(huì)隨文檔改變，靜態(tài)的不會(huì) 取出來之后就和文檔的改變無關(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，為了之后動(dòng)態(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')); //動(dòng)態(tài)追加li
}
</script>上述代碼會(huì)陷入死循環(huán)，i < list.length 這個(gè)循環(huán)條件。
因?yàn)樵诘谝淮潍@取到里面的 3 個(gè) li 后，每當(dāng)往 ul 里添加了新元素后，list便會(huì)更新其值，重新獲取ul里的所有l(wèi)i。
也就是 getElement(s)Byxxxx 獲取的是動(dòng)態(tài)集合，它總會(huì)隨著 dom 結(jié)構(gòu)的變化而變化。
也就是每一次調(diào)用 list 都會(huì)重新對文檔進(jìn)行查詢，導(dǎo)致無限循環(huán)的問題。
示例1 修改：
將 for 循環(huán)條件修改為 i < 4，結(jié)果 在 ul 里新添加了4個(gè)元素，所有現(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ù)再動(dòng)態(tài)添加了多少 li，都是不會(huì)對其參數(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，不是此時(shí) li 的數(shù)量 6
</script>
為什么要這樣設(shè)計(jì)呢？
在 W3C 規(guī)范中對 querySelectorAll 方法有明確規(guī)定：
The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).
我們再看看在 Chrome 上面是個(gè)什么樣的情況：
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.
實(shí)際上，HTMLCollection 和 NodeList 十分相似，都是一個(gè)動(dòng)態(tài)的元素集合，每次訪問都需要重新對文檔進(jìn)行查詢。
區(qū)別：HTMLCollection 屬于 Document Object Model HTML 規(guī)范，而 NodeList 屬于 Document Object Model Core 規(guī)范。
這樣說有點(diǎn)難理解，看看下面的例子會(huì)比較好理解：
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]" 4NodeList 對象會(huì)包含文檔中的所有節(jié)點(diǎn)，如 Element、Text 和 Comment 等；
HTMLCollection 對象只會(huì)包含文檔中的 Element 節(jié)點(diǎn)；
另外，HTMLCollection 對象比 NodeList 對象 多提供了一個(gè) namedItem 方法；
因此在瀏覽器中，querySelectorAll 的返回值是一個(gè)靜態(tài)的 NodeList 對象，而 getElementsBy 系列的返回值實(shí)際上是一個(gè) HTMLCollection 對象 。
querySelectorAll 方法接收的參數(shù)是一個(gè) 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ī)范的
下面這種寫法，將會(huì)拋出異常（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);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)支持；
到此，關(guān)于“JavaScript中querySelector與getElementById方法的區(qū)別是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼