昨天我們做了一個純 JS 資料邏輯的待辦清單，但畫面還在 console 裡。
今天開始，我們要學會「真的操作網頁畫面」，這就是 DOM 的世界。

1.DOM是什麼？

DOM就是瀏覽器幫我們把 HTML 轉換成一棵「物件樹」，每一個HTML標籤在JS裡就是一個「節點（Node）/物件」
你可以用 JS 讀取、修改、刪除、甚至新增節點，假設HTML是房子的結構、CSS是內部裝潢，DOM就是讓我們能用JS來改變房子的內裝，可以說DOM就是我們操作網頁的橋樑

許多網頁互動的部分如：按鈕、表單、動畫、資料渲染......都可以透過DOM來操作

2.選取元素的方法

最基本的就是document.querySelector和document.querySelectorAll

document.querySelector('選擇器'):取得第一個符合條件的元素

document.querySelectorAll('選擇器'):取得所有符合條件的元素（NodeList）

選擇器的寫法跟 CSS 一模一樣

範例：

<h1 id="title">Hello</h1>
<p class="content">第一段</p>
<p class="content">第二段</p>

const title = document.querySelector('#title'); // 依 id 選取
const firstParagraph = document.querySelector('.content'); // 第一個符合 class content
const allParagraphs = document.querySelectorAll('.content'); // 所有符合的節點

console.log(title.textContent); // Hello
console.log(firstParagraph.textContent); // 第一段
console.log(allParagraphs.length); // 2

整理一下今天的內容：
1.DOM把HTML元素變成可以用JS操作的物件。
2.document.querySelector() 可以用CSS選擇器選到任何元素
3.document.querySelectorAll()則可以一次選到多個元素