溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

JS中querySelector與getElementById方法的區(qū)別有哪些

發(fā)布時(shí)間：2021-10-22 13:38:21 來(lái)源：億速云 閱讀：150 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容介紹了“JS中querySelector與getElementById方法的區(qū)別有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

目錄

  • 1. 概述

    • 1.1 querySelector() 和 querySelectorAll() 的用法

    • 1.2 getElement(s)Byxxxx 的用法

  • 2. 區(qū)別

    • 2.1 getElement(s)Byxxxx 獲取的是動(dòng)態(tài)集合，querySelector 獲取的是靜態(tài)集合

    • 2.2 接收的參數(shù)不同

    • 2.3 瀏覽器兼容不同

1. 概述

在看代碼的時(shí)候發(fā)現(xiàn)基本上都是用 querySelector() 和 querySelectorAll() 來(lái)獲取元素，疑惑為什么不用 getElementById() 。
可能因?yàn)樽约簺](méi)用過(guò)那兩個(gè)，所以并不清楚原因所在。

1.1 querySelector() 和 querySelectorAll() 的用法

querySelector() 方法

定義：querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素；

注意：uerySelector() 方法僅返回匹配指定選擇器的第一個(gè)元素。如果你需要返回所有的元素，請(qǐng)用 querySelectorAll() 方法替代；

語(yǔ)法：document.querySelector(CSS selectors)；

參數(shù)值：String  必須。指定一個(gè)或多個(gè)匹配元素的 CSS 選擇器。使用它們的 id, 類(lèi), 類(lèi)型, 屬性, 屬性值等來(lái)選取元素。
        對(duì)于多個(gè)選擇器，使用逗號(hào)隔開(kāi)，返回一個(gè)匹配的元素。
返回值:  匹配指定 CSS 選擇器的第一個(gè)元素。 如果沒(méi)有找到，返回 null。如果指定了非法選擇器則 拋出 SYNTAX_ERR 異常。

querySelectorAll() 方法

定義：   querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對(duì)象；
         NodeList 對(duì)象表示節(jié)點(diǎn)的集合?？梢酝ㄟ^(guò)索引訪問(wèn)，索引值從 0 開(kāi)始；

提示:    可使用 NodeList 對(duì)象的 length 屬性來(lái)獲取匹配選擇器的元素屬性，然后遍歷所有元素，從而獲取想要的信息；

語(yǔ)法：   elementList = document.querySelectorAll(selectors);
      elementList 是一個(gè)靜態(tài)的 NodeList 類(lèi)型的對(duì)象；
         selectors 是一個(gè)由逗號(hào)連接的包含一個(gè)或多個(gè) CSS 選擇器的字符串；

參數(shù)值：  String  必須。指定一個(gè)或多個(gè)匹配 CSS 選擇器的元素?？梢酝ㄟ^(guò) id, class, 類(lèi)型, 屬性, 屬性值等作為選擇器來(lái)獲取元素。
   多個(gè)選擇器使用逗號(hào)(,)分隔。

返回值:   一個(gè) NodeList 對(duì)象，表示文檔中匹配指定 CSS 選擇器的所有元素。 
   NodeList 是一個(gè)靜態(tài)的 NodeList 類(lèi)型的對(duì)象。如果指定的選擇器不合法，則拋出一個(gè) SYNTAX_ERR 異常。

1.2 getElement(s)Byxxxx 的用法

getElementById() 方法

定義：  getElementById() 方法可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用。
  如果沒(méi)有指定 ID 的元素返回 null;
  如果存在多個(gè)指定 ID 的元素則返回第一個(gè);
  如果需要查找到那些沒(méi)有 ID 的元素，你可以考慮通過(guò)CSS選擇器使用 querySelector();

語(yǔ)法: document.getElementById(elementID);

參數(shù)值： String 必須。元素ID屬性值。
返回值:  元素對(duì)象 指定ID的元素

getElementsByTagName() 方法

定義：   getElementsByTagName() 方法可返回帶有指定標(biāo)簽名的對(duì)象的集合；
提示：   參數(shù)值 "*" 返回文檔的所有元素；
語(yǔ)法： document.getElementsByTagName(tagname)
參數(shù)： String 必須  要獲取元素的標(biāo)簽名；
返回值： NodeList 對(duì)象 指定標(biāo)簽名的元素集合

getElementsByClassName() 方法

定義： getElementsByClassName() 方法返回文檔中所有指定類(lèi)名的元素集合，作為 NodeList 對(duì)象。
  NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象 可通過(guò)節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來(lái)訪問(wèn)表中的節(jié)點(diǎn)(索引號(hào)由0開(kāi)始)。
提示：  可使用 NodeList 對(duì)象的 length 屬性來(lái)確定指定類(lèi)名的元素個(gè)數(shù)，并循環(huán)各個(gè)元素來(lái)獲取需要的那個(gè)元素。
語(yǔ)法：  document.getElementsByClassName(classname)
參數(shù)：  String 必須 需要獲取的元素類(lèi)名。  多個(gè)類(lèi)名使用空格分隔，如 "test demo"；
返回值： NodeList 對(duì)象，表示指定類(lèi)名的元素集合。元素在集合中的順序以其在代碼中的出現(xiàn)次序排序。

2. 區(qū)別

2.1 getElement(s)Byxxxx 獲取的是動(dòng)態(tài)集合，querySelector 獲取的是靜態(tài)集合

動(dòng)態(tài)就是選出的元素會(huì)隨文檔改變，靜態(tài)的不會(huì) 取出來(lái)之后就和文檔的改變無(wú)關(guān)了。

示例1：

<body>
  <ul id="box">
    <li class="a">測(cè)試1</li>
    <li class="a">測(cè)試2</li>
    <li class="a">測(cè)試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ì)重新對(duì)文檔進(jìn)行查詢(xún)，導(dǎo)致無(wú)限循環(huán)的問(wè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">測(cè)試1</li>
    <li class="a">測(cè)試2</li>
    <li class="a">測(cè)試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>

JavaScript中 querySelector 與 getElementById 方法的區(qū)別_javascript

JS中querySelector與getElementById方法的區(qū)別有哪些

示例2：

下述代碼靜態(tài)集合體現(xiàn)在 .querySelectorAll(‘li') 獲取到 ul 里所有 li 后，不管后續(xù)再動(dòng)態(tài)添加了多少 li，都是不會(huì)對(duì)其參數(shù)影響。

<body>
  <ul id="box">
    <li class="a">測(cè)試1</li>
    <li class="a">測(cè)試2</li>
    <li class="a">測(cè)試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>

JavaScript中 querySelector 與 getElementById 方法的區(qū)別_javascript_02

JS中querySelector與getElementById方法的區(qū)別有哪些

為什么要這樣設(shè)計(jì)呢？

在 W3C 規(guī)范中對(duì) querySelectorAll 方法有明確規(guī)定：

The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).

我們?cè)倏纯丛?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)的元素集合，每次訪問(wèn)都需要重新對(duì)文檔進(jìn)行查詢(xún)。
區(qū)別：HTMLCollection 屬于 Document Object Model HTML 規(guī)范，而 NodeList 屬于 Document Object Model Core 規(guī)范。

這樣說(shuō)有點(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]" 4

NodeList 對(duì)象會(huì)包含文檔中的所有節(jié)點(diǎn)，如 Element、Text 和 Comment 等；
HTMLCollection 對(duì)象只會(huì)包含文檔中的 Element 節(jié)點(diǎn)；
另外，HTMLCollection 對(duì)象比 NodeList 對(duì)象 多提供了一個(gè) namedItem 方法；
因此在瀏覽器中，querySelectorAll 的返回值是一個(gè)靜態(tài)的 NodeList 對(duì)象，而 getElementsBy 系列的返回值實(shí)際上是一個(gè) HTMLCollection 對(duì)象 。

2.2 接收的參數(shù)不同

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ī)范的
下面這種寫(xiě)法，將會(huì)拋出異常（CSS 選擇器中的元素名，類(lèi)和 ID 均不能以數(shù)字為開(kāi)頭）。

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)支持；

“JS中querySelector與getElementById方法的區(qū)別有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手