[DOM]-2.querySelector選擇單一元素

1.前面章節幾乎都使用getElementById取ID的方式更改文字內容

<h1 id="title">title</h1>

var el1 = document.getElementById('title');
el1.textContent = '123';

2.querySelector很像Css的＃，再ID名稱前面加#

<h1 id="titleId">title</h1>

var el2 = document.querySelector('#titleId');
el2.textContent = '1234';

3.querySelector也可用class，在class名稱前面加.

<h1 class="titleClass1">title</h1>

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

4.querySelector也可用html標籤，titleClass2為父元素em為子元素，但這裡是運用querySelector('.titleClass2 em')是要取出em

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

var el4 = document.querySelector('.titleClass2 em');
el4.textContent = '12356';

codepen