想操作 DOM 元素時，首先得將 DOM 給選起來。
我們先寫一個簡單的 HTML 架構：
<body>
<h1 id="title">master title</h1>
<div class="banner">
<p>slogan</p>
</div>
</body>
當我們想要利用 JavaScript 修改 h1 的內容時，就可以使用 querySelector 來選取。
let masterTitle = document.querySelector('#title');
//他會去尋找 ID 為 title 的 DOM
masterTitle.textConetnt = 'NEW title';
// 利用 textContent 來置換原本的內容
當然，用選取器選擇起來後不單單只能修改內容文字，你也可以直接修改成新的 HTML 結構進去。
let masterTitle = document.querySelector('.banner');
masterTitle.innerHTML = `
<a href="#">
<p>NEW LINK</p>
</a>
`
//ES 6 可以直接在反引號裡面寫上 HTML 結構
//用 innerHTML 修改原本的 HTML
最後要注意的是，querySelector('') 的括號裡面，要選取 id 時前面要加上 #，選取 class 時別忘了加上 .
雖然你看到這可能想說我在說什麼屁話 XD，但是我以前真的常常忘記加，所以提醒各位使用的時候別忘記了喔 :D
iThome鐵人賽
看影片追技術