---
# System prepended metadata

title: 2. querySelectorAll - 可重複選取多個元素
tags: [JavaScript - DOM 元素]

---

# 2. querySelectorAll - 可重複選取多個元素

- querySelectorAll 顧名思義就是同時選取多個元素，但在使用上會有一些小問題:

1. 瀏覽下列 HTML 有兩個同樣屬性名稱的類別 .test:

```
// HTML:

    <div class="test"><em></em></div>
    <div class="test"><em></em></div>
    <script src="js/all.js"></script>
```

2. 接著在 JavaScript，使用 querySelector 撈看看:

```
var el = document.querySelector('.test em');
el.textContent = '測試;'
```
- 妳以為會出現兩個測試對吧 :) 其實沒:
  
  只會出現在一個，並不會同時改變兩個 tag 內容:
 
// 測試


### 使用 querySelectorAll ?

```
var el = document.querySelectorAll('.test em');
el.textContent = '測試;'
```

- 結果資料就不見了，也沒能夠如期將所有標籤改變內容 why?




---

### 理解不能? 用 console 看看資料:

```
console.log(el);

// 結果會跑出一個陣列資料: 
NodeList(2) [em, em, textContent: '測試;']
```

### 顯示這筆資料為一組陣列，那自然我們就無法使用一般的方式來指定 class:



---

### 回顧 for 與 array 的作法:

- 例如我們已經知道 .test em 有兩個，我們就可以用 0..1 這樣的方式來執行:
```
// try-1，如果知道資料長度是多少，可以用 name[陣列數]的方式來改變資料:

el[0].textContent = '改變資料-1';
el[1].textContent = '改變資料-2'
```

### 使用 array 長度計算 or for 迴圈來執行:

```
// 將變數儲存成長度:
var elall = el.length;


for (var i = 0; i < elall; i++) {
    el[i].textContent = i + '. ' + '資料更新';
}
```



###### tags: `JavaScript - DOM 元素`