# 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 元素`