昨天 (D9) 我們已經學了 JavaScript 根據 DOM Model 讓使用者與特定元素 (element) 互相之間溝通的方法, 今天我們要來繼續看另外一個溝通的 method, querySelector 和 querySelectorAll

Using Selectors in JavaScript:

我們在 D1 有學到如何搜尋特定的 node, 但是想要更有效率的搜尋, 可以使用 querySelector ,
從 document 標記中的第一個元素開始, 進行深度優先順序追蹤 document nodes。

querySelector example:

HTML

<h2 class="example">Heading</h2>
<h2 class="example">Heading</h2>
<h2 class="example">Heading</h2>
<h2 class="example">Heading</h2>

如果搜尋 class 為 example 的 node, 套用以下的 querySelector 會發現追蹤結果是只有第一個
.example node 的文字內容被進行更改成 Hello World, 而其餘的 .example node 並沒有被修改追蹤修改到。因為 querySelector 只會存取第一個元素的資料。

// querySelector 可以選擇 class 也可以選擇 id
document.querySelector('.example').textContent = 'Hello World';

querySelectorAll example:

如果需要追蹤 多個重複 的 nodes, 那麼就可以改用 querySelectorAll, 可以直接把存取的元素內容放在一個 array 裡面並且回傳給使用者。

document.querySelectorAll('.example');

選取 class 為 example 的 nodes, 套用以下的 querySelectorAll 會發現追蹤結果把所有符合要求的元素都存取於一個 array, 並對 array 的每筆資料進行文字更改。

// querySelectorAll 可以選擇 id，也可以選擇 class 裡面的多個內容選項
var el = document.querySelectorAll('.example');
el[0].textContent = 'hi';
el[1].textContent = 'hihi';
el[2].textContent = 'hihihi';
el[3].textContent = 'Hello World';

使用 for loop 一次選取多個元素並對其所有做統一的內容更改, 因為你可能也不知道需要選
取多少筆資料。

var el = document.querySelectorAll('.example');
for(var i = 0; i <el.length; i++){
    el[i].textContent = '文字內容更改';
}

常見的 querySelectorAll 問題

1. 你可能會有滿大的機率會忘記寫 . 或 # 在 class 或 id 前面

   // 錯誤:
   let gameButtons = document.querySelectorAll("control");```
   
   // 正確:
   let gameButtons = document.querySelectorAll(".control");
   

2. querySelectorAll 返回一個 array, 而不是 single element (單個元素), 必須遍歷結果

   // 錯誤
   let gameButtons = document.querySelectorAll(".control");
   gameButtons.addEventListener(“click”, enableGameButton);
   
   // 正確
   let gameButtons = document.querySelectorAll(".control");
   for (let i = 0; i < gameButtons.length; i++) {
     gameButtons[i].addEventListener(“click”, enableGameButton);
   }
   

Example:
編寫一個函數，選擇網頁上的所有 img 並將其 src 屬性設置為 https://giphy.com/gifs/puppy-dog-jaqvaWqpKfImQ

function puppy() {
  let images = document.querySelectorAll("img");
  for(let i = 0; i < images.length; i++) {
    images[i].src = "https://media.giphy.com/media/jaqvaWqpKfImQ/giphy.gif";
    images[i].alt = "three cute puppies"
  }
}

將 code 貼到網頁上的 console 中，接著在 console 中呼叫 puppy function。隨機選個網站, 你會發現有趣的現象喔!

Before:

Credit: https://www.petco.com/shop/en/petcostore

After: