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() 的差别