querySelectorAll - 可重複選取多個元素

Posted on In

用 querySelectorAll 可以選擇多筆資料

先看下面的範例：我用 JS 在<em></em>裡面插入內容

html:

1
<h1 class="titleClass"><em></em></h1>

JS:

1
2
3
var el = document.querySelector('.titleClass em');

el.textContent = '123';

在<em></em>就會顯示「123」

如果有兩個<em></em>呢？

html:

1
2
<h1 class="titleClass"><em></em></h1>
<h1 class="titleClass"><em></em></h1>

JS:

1
2
3
var el = document.querySelector('.titleClass em');

el.textContent = '123';

‼️ 如果有兩個<em></em>，會發現：

  • 「只有第一個<em></em>」的內容被更新（紅色箭頭處）
  • 「第二個<em></em>」的內容並沒有被更新（藍色箭頭處）

原因為：

🎃 .querySelector()只會抓「第一筆資料」去做更新

如果在「相同的 className 下」，有很多元件要「同時做更新」，該怎麼選擇這些元件呢？

作法如下

.querySelector跟.querySelectorAll的差異

🎃 .querySelector() 會從上找到下，找出符合“指定 className”的「第一個 DOM」

🎃 .querySelectorAll() 會從上找到下，找出符合“指定 className”的「全部 DOM」，並且以「陣列 array」的方式回傳

用.querySelectorAll()選擇“指定元件”

.querySelectorAll()使用時機：

🎃 當“指定元件”有「多筆資料」，用.querySelectorAll()選擇“指定元件”後，會回傳「一個陣列」，我就可以依序選取「陣列裡的資料」

😎 單筆資料：使用.querySelector()
😎 多筆資料：使用.querySelectorAll()

html:

1
2
<h1 class="titleClass"><em></em></h1>
<h1 class="titleClass"><em></em></h1>

JS:

1
2
3
var el = document.querySelectorAll('.titleClass em');

console.log(el);

先用console.log(el);看一下，.querySelectorAll()會選取到什麼樣的資料：

可以看到

🎃 用.querySelectorAll()選取出來的資料是一個「陣列」–> 要針對「陣列裡的資料」去新增內容，就要使用「for迴圈」去跑

html:

1
2
<h1 class="titleClass"><em></em></h1>
<h1 class="titleClass"><em></em></h1>

🎃 如果知道陣列裡的資料有哪些，就可以這樣寫

🍋 針對「el陣列」裡的「第一筆資料」去新增內容： el[0].textContent = 'juju';

🍋 針對「el陣列」裡的「第二筆資料」去新增內容： el[1].textContent = 'I love you';

JS:

1
2
3
4
var el = document.querySelectorAll('.titleClass em');

el[0].textContent = 'juju';
el[1].textContent = 'I love you';

用「for迴圈」依序新增內容

當我無法得知陣列裡的資料有幾筆時，就用「for迴圈」依序新增內容

作法如下：

🎃 先計算出「陣列中，共有幾筆資料」： var total = el.length;
🎃 用「for迴圈」新增內容（i會分別帶入 0, 1）

JS:

1
2
3
4
5
6
var el = document.querySelectorAll('.titleClass em');

var total = el.length;
for(var i = 0; i < total; i++){
    el[i].textContent = i + '789';
}