閱讀(1.1k) 書簽贊(0) 我要糾錯(cuò)

Javascript 搜索：getElement，querySelector

2023-02-17 10:54 更新

當(dāng)元素彼此靠得近時(shí)，DOM 導(dǎo)航屬性（navigation property）非常有用。如果不是，那該怎么辦？如何去獲取頁面上的任意元素？

還有其他搜索方法。

document.getElementById 或者只使用 id

如果一個(gè)元素有 id 特性（attribute），那我們就可以使用 document.getElementById(id) 方法獲取該元素，無論它在哪里。

例如：

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 獲取該元素
  let elem = document.getElementById('elem');

  // 將該元素背景改為紅色
  elem.style.background = 'red';
</script>

此外，還有一個(gè)通過 id 命名的全局變量，它引用了元素：

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // elem 是對帶有 id="elem" 的 DOM 元素的引用
  elem.style.background = 'red';

  // id="elem-content" 內(nèi)有連字符，所以它不能成為一個(gè)變量
  // ...但是我們可以通過使用方括號(hào) window['elem-content'] 來訪問它
</script>

……除非我們聲明一個(gè)具有相同名稱的 JavaScript 變量，否則它具有優(yōu)先權(quán)：

<div id="elem"></div>

<script>
  let elem = 5; // 現(xiàn)在 elem 是 5，而不是對 <div id="elem"> 的引用

  alert(elem); // 5
</script>

請不要使用以 id 命名的全局變量來訪問元素

在規(guī)范中對此行為進(jìn)行了描述，所以它是一種標(biāo)準(zhǔn)。但這是注意考慮到兼容性才支持的。

瀏覽器嘗試通過混合 JavaScript 和 DOM 的命名空間來幫助我們。對于內(nèi)聯(lián)到 HTML 中的簡單腳本來說，這還行，但是通常來說，這不是一件好事。因?yàn)檫@可能會(huì)造成命名沖突。另外，當(dāng)人們閱讀 JavaScript 代碼且看不到對應(yīng)的 HTML 時(shí)，變量的來源就會(huì)不明顯。

在本教程中，我們只會(huì)在元素來源非常明顯時(shí)，為了簡潔起見，才會(huì)使用 id 直接引用對應(yīng)的元素。

在實(shí)際開發(fā)中，document.getElementById 是首選方法。

?id? 必須是唯一的

id 必須是唯一的。在文檔中，只能有一個(gè)元素帶有給定的 id。

如果有多個(gè)元素都帶有同一個(gè) id，那么使用它的方法的行為是不可預(yù)測的，例如 document.getElementById 可能會(huì)隨機(jī)返回其中一個(gè)元素。因此，請遵守規(guī)則，保持 id 的唯一性。

只有 ?document.getElementById?，沒有 ?anyElem.getElementById?

getElementById 方法只能被在 document 對象上調(diào)用。它會(huì)在整個(gè)文檔中查找給定的 id。

querySelectorAll

到目前為止，最通用的方法是 elem.querySelectorAll(css)，它返回 elem 中與給定 CSS 選擇器匹配的所有元素。

在這里，我們查找所有為最后一個(gè)子元素的 <li> 元素：

<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
</script>

這個(gè)方法確實(shí)功能強(qiáng)大，因?yàn)榭梢允褂萌魏?CSS 選擇器。

也可以使用偽類

CSS 選擇器的偽類，例如 :hover 和 :active 也都是被支持的。例如，document.querySelectorAll(':hover') 將會(huì)返回鼠標(biāo)指針正處于其上方的元素的集合（按嵌套順序：從最外層 <html> 到嵌套最多的元素）。

querySelector

elem.querySelector(css) 調(diào)用會(huì)返回給定 CSS 選擇器的第一個(gè)元素。

換句話說，結(jié)果與 elem.querySelectorAll(css)[0] 相同，但是后者會(huì)查找所有元素，并從中選取一個(gè)，而 elem.querySelector 只會(huì)查找一個(gè)。因此它在速度上更快，并且寫起來更短。

matches

之前的方法是搜索 DOM。

elem.matches(css) 不會(huì)查找任何內(nèi)容，它只會(huì)檢查 elem 是否與給定的 CSS 選擇器匹配。它返回 true 或 false。

當(dāng)我們遍歷元素（例如數(shù)組或其他內(nèi)容）并試圖過濾那些我們感興趣的元素時(shí)，這個(gè)方法會(huì)很有用。

例如：

<a  rel="external nofollow" target="_blank" >...</a>
<a  rel="external nofollow" target="_blank" >...</a>

<script>
  // 不一定是 document.body.children，還可以是任何集合
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("The archive reference: " + elem.href );
    }
  }
</script>

closest

元素的祖先（ancestor）是：父級(jí)，父級(jí)的父級(jí)，它的父級(jí)等。祖先們一起組成了從元素到頂端的父級(jí)鏈。

elem.closest(css) 方法會(huì)查找與 CSS 選擇器匹配的最近的祖先。elem 自己也會(huì)被搜索。

換句話說，方法 closest 在元素中得到了提升，并檢查每個(gè)父級(jí)。如果它與選擇器匹配，則停止搜索并返回該祖先。

例如：

<h1>Contents</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">Chapter 1</li>
    <li class="chapter">Chapter 2</li>
  </ul>
</div>

<script>
  let chapter = document.querySelector('.chapter'); // LI

  alert(chapter.closest('.book')); // UL
  alert(chapter.closest('.contents')); // DIV

  alert(chapter.closest('h1')); // null（因?yàn)?h1 不是祖先）
</script>

getElementsBy*

還有其他通過標(biāo)簽，類等查找節(jié)點(diǎn)的方法。

如今，它們大多已經(jīng)成為了歷史，因?yàn)?nbsp;querySelector 功能更強(qiáng)大，寫起來更短。

因此，這里我們介紹它們只是為了完整起見，而你仍然可以在舊腳本中找到這些方法。

?elem.getElementsByTagName(tag)? 查找具有給定標(biāo)簽的元素，并返回它們的集合。?tag? 參數(shù)也可以是對于“任何標(biāo)簽”的星號(hào) ?"*"?。
?elem.getElementsByClassName(className)? 返回具有給定CSS類的元素。
?document.getElementsByName(name)? 返回在文檔范圍內(nèi)具有給定 ?name? 特性的元素。很少使用。

例如：

// 獲取文檔中的所有 div
let divs = document.getElementsByTagName('div');

讓我們查找 table 中的所有 input 標(biāo)簽：

<table id="table">
  <tr>
    <td>Your age:</td>

    <td>
      <label>
        <input type="radio" name="age" value="young" checked> less than 18
      </label>
      <label>
        <input type="radio" name="age" value="mature"> from 18 to 50
      </label>
      <label>
        <input type="radio" name="age" value="senior"> more than 60
      </label>
    </td>
  </tr>
</table>

<script>
  let inputs = table.getElementsByTagName('input');

  for (let input of inputs) {
    alert( input.value + ': ' + input.checked );
  }
</script>

不要忘記字母 ?"s"?！

新手開發(fā)者有時(shí)會(huì)忘記字符 "s"。也就是說，他們會(huì)調(diào)用 getElementByTagName 而不是 getElementsByTagName。

getElementById 中沒有字母 "s"，是因?yàn)樗环祷貑蝹€(gè)元素。但是 getElementsByTagName 返回的是元素的集合，所以里面有 "s"。

它返回的是一個(gè)集合，不是一個(gè)元素！

新手的另一個(gè)普遍的錯(cuò)誤是寫：
// 行不通
document.getElementsByTagName('input').value = 5;
這是行不通的，因?yàn)樗枰氖且粋€(gè) input 的集合，并將值賦（assign）給它，而不是賦值給其中的一個(gè)元素。

我們應(yīng)該遍歷集合或通過對應(yīng)的索引來獲取元素，然后賦值，如下所示：
// 應(yīng)該可以運(yùn)行（如果有 input）
document.getElementsByTagName('input')[0].value = 5;

查找 .article 元素：

<form name="my-form">
  <div class="article">Article</div>
  <div class="long article">Long article</div>
</form>

<script>
  // 按 name 特性查找
  let form = document.getElementsByName('my-form')[0];

  // 在 form 中按 class 查找
  let articles = form.getElementsByClassName('article');
  alert(articles.length); // 2, found two elements with class "article"
</script>

實(shí)時(shí)的集合

所有的 "getElementsBy*" 方法都會(huì)返回一個(gè) 實(shí)時(shí)的（live） 集合。這樣的集合始終反映的是文檔的當(dāng)前狀態(tài)，并且在文檔發(fā)生更改時(shí)會(huì)“自動(dòng)更新”。

在下面的例子中，有兩個(gè)腳本。

第一個(gè)創(chuàng)建了對 ?<div>? 的集合的引用。截至目前，它的長度是 ?1?。
第二個(gè)腳本在瀏覽器再遇到一個(gè) ?<div>? 時(shí)運(yùn)行，所以它的長度是 ?2?。

<div>First div</div>

<script>
  let divs = document.getElementsByTagName('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 2
</script>

相反，querySelectorAll 返回的是一個(gè) 靜態(tài)的 集合。就像元素的固定數(shù)組。

如果我們使用它，那么兩個(gè)腳本都會(huì)輸出 1：

<div>First div</div>

<script>
  let divs = document.querySelectorAll('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 1
</script>

現(xiàn)在我們可以很容易地看到不同之處。在文檔中出現(xiàn)新的 div 后，靜態(tài)集合并沒有增加。

總結(jié)

有 6 種主要的方法，可以在 DOM 中搜索元素節(jié)點(diǎn)：

方法名	搜索方式	可以在元素上調(diào)用？	實(shí)時(shí)的？
`querySelector`	CSS-selector	?	-
`querySelectorAll`	CSS-selector	?	-
`getElementById`	`id`	-	-
`getElementsByName`	`name`	-	?
`getElementsByTagName`	tag or `'*'`	?	?
`getElementsByClassName`	class	?	?

目前為止，最常用的是 querySelector 和 querySelectorAll，但是 getElement(s)By* 可能會(huì)偶爾有用，或者可以在舊腳本中找到。

此外：

?elem.matches(css)? 用于檢查 ?elem? 與給定的 CSS 選擇器是否匹配。
?elem.closest(css)? 用于查找與給定 CSS 選擇器相匹配的最近的祖先。?elem? 本身也會(huì)被檢查。

讓我們在這里提一下另一種用來檢查子級(jí)與父級(jí)之間關(guān)系的方法，因?yàn)樗袝r(shí)很有用：

如果 ?elemB? 在 ?elemA? 內(nèi)（?elemA? 的后代）或者 ?elemA==elemB?，?elemA.contains(elemB)? 將返回 true。

任務(wù)

搜索元素

重要程度: 4

這是帶有表格（table）和表單（form）的文檔。

如何查找？……

帶有 ?id="age-table"? 的表格。
表格內(nèi)的所有 ?label? 元素（應(yīng)該有三個(gè)）。
表格中的第一個(gè) ?td?（帶有 “Age” 字段）。
帶有 ?name="search"? 的 ?form?。
表單中的第一個(gè) ?input?。
表單中的最后一個(gè) ?input?。

在一個(gè)單獨(dú)的窗口中打開 table.html 頁面，并對此頁面使用瀏覽器開發(fā)者工具。

解決方案

實(shí)現(xiàn)的方式有很多種。

以下列舉的是其中一些方法：

// 1. 帶有 id="age-table" 的表格。
let table = document.getElementById('age-table')

// 2. 表格內(nèi)的所有 label 元素
table.getElementsByTagName('label')
// 或
document.querySelectorAll('#age-table label')

// 3. 表格中的第一個(gè) td（帶有 "Age" 字段）
table.rows[0].cells[0]
// 或
table.getElementsByTagName('td')[0]
// 或
table.querySelector('td')

// 4. 帶有 name="search" 的 form。
// 假設(shè)文檔中只有一個(gè) name="search" 的元素
let form = document.getElementsByName('search')[0]
// 或者，專門對于 form
document.querySelector('form[name="search"]')

// 5. 表單中的第一個(gè) input
form.getElementsByTagName('input')[0]
// 或
form.querySelector('input')

// 6. 表單中的最后一個(gè) input
let inputs = form.querySelectorAll('input') // 查找所有 input
inputs[inputs.length-1] // 取出最后一個(gè)

以上內(nèi)容是否對您有幫助：

在文檔使用的過程中是否遇到以下問題：