[DOM]-3.querySelectorAll-可重複選取多個元素

<h1 class="titleClass1"><em></em></h1>
<h1 class="titleClass1"><em></em></h1>
<h1 class="titleClass2"><em></em></h1>
<h1 class="titleClass2"><em></em></h1>

1.為什麼原本的方式不能選取多個元素,原因是querySelector只讀取單一的元素

var el1 = document.querySelector('.titleClass1');
el1.textContent = '12345';

2.從這個寫法就是querySelectorAll選取多個元素形成陣列的寫法

var el1 = document.querySelectorAll('.titleClass1 em');
el1[0].textContent ='123';
el1[1].textContent ='123';

3.在上個for迴圈章節老師有提到for迴圈跟陣列是朋友可以搭配,利用for迴圈將整個陣列的元素一次將同一個資料列出來

var el2 = document.querySelectorAll('.titleClass2 em');
var el2Len = el1.length;

for(var i=0; i<el2Len; i++){
  el2[i].textContent='12345';
}