快捷導(dǎo)航

JS中 querySelector 與 getElementById 方法區(qū)別

更新時(shí)間：2021年10月22日 15:03:27 作者：炫幻星辰

這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法與區(qū)別，圍繞querySelector 與 getElementById 的相關(guān)資料展開文章內(nèi)容,需要的朋友可以參考一下

1. 概述

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

1.1 querySelector() 和 querySelectorAll() 的用法

querySelector() 方法

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

注意：uerySelector() 方法僅返回匹配指定選擇器的第一個(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 異常。

1.2 getElement(s)Byxxxx 的用法

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)次序排序。

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 這個(gè)循環(huán)條件。
因?yàn)樵诘谝淮潍@取到里面的 3 個(gè) li 后，每當(dāng)往 ul 里添加了新元素后，list便會更新其值，重新獲取ul里的所有l(wèi)i。
也就是 getElement(s)Byxxxx 獲取的是動態(tài)集合，它總會隨著 dom 結(jié)構(gòu)的變化而變化。
也就是每一次調(diào)用 list 都會重新對文檔進(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>

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

示例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，不是此時(shí) li 的數(shù)量 6
</script>

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

為什么要這樣設(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è)動態(tài)的元素集合，每次訪問都需要重新對文檔進(jìn)行查詢。
區(qū)別：HTMLCollection 屬于 Document Object Model HTML 規(guī)范，而 NodeList 屬于 Document Object Model Core 規(guī)范。

這樣說有點(diǎn)難理解，看看下面的例子會比較好理解：

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

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ī)范的
下面這種寫法，將會拋出異常（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)支持；

到此這篇關(guān)于JavaScript中 querySelector 與 getElementById 方法區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript中 querySelector 與 getElementById 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: