iT邦幫忙

1

JavaScript 基礎知識-querySelectorAll

<h2 class="title"><em></em></h2>
<h2 class="title"><em></em></h2>
<h2 class="title"><em></em></h2>
<h2 class="title"><em></em></h2>

如果我們 HTML 的架構如上,此時若使用

document.querySelector('.title').textContent = '123';

會發現只有第一個 .title 被改寫,其他的 .title 並沒有
.qeurySelector() 只會針對元素的第一筆資料,其他並不會被選入
這時候可以使用 .querySelectorAll(),這個不但可以把同樣的元素選起來外,還會以陣列的方式被傳回
如果以上面的 HTML 架構

document.querySelectorAll('.title');

這時候會把所有 .title 類別選取起來,並存放於一個陣列,用讀取陣列的方式我們可以針對每一個項目去做文字的更改:

var el = document.querySelectorAll('.title');
el[0].textContent = '123';
el[1].textContent = '456';
el[2].textContent = '789';
el[3].textContent = '123456789';

或對全部同類別的元素一次做修改,記得使用 for 迴圈,因為是陣列的方式選取:

var el = document.querySelectorAll('.title');
for(var i=0; i<el.length; i++){
    el[i].textContent = '更改';
}

這時候所有 .title 類別的文字都會一起改變
大家可以試試看 .querySelector().querySelectorAll() 的差別


尚未有邦友留言

立即登入留言