我們之前在 HTML 篇章有介紹 DOM，是 Document Object Model 的縮寫！ 我們主要操作 DOM 來控制網頁內容
- Document 代表了整個 HTML 網頁
- Object 代表把網頁中每個部分節點都轉變成物件
- Model 代表用來表示物件之間的關係，形成容易理解的樹狀圖，也就是 DOM Tree
還記得它吧～
#利用 DOM 取得文本內容
之前已經認識了網頁標籤，而現在我們要透過 JavaScript 來獲取我們的網頁節點！
假設我們要獲取 button 內的文本內容
複製成功！
<button class="btn" id="btn">我是按鈕</button>
#獲取文本內容
- 可以使用
textContent來獲取文本內容字的部分，同時也能依靠它來變更文本內容 - 可以使用
innerHTML來獲取文本內容，與textContent相比更方便常用，除了獲取到文本內容的字，連文本內容的標籤也會獲取，同時也能依靠它來變更文本內容與標籤
#獲取節點
而獲取節點的方法也很多，我來講幾個比較常用的獲取方法～
- 透過
id來獲取document.getElementById("");，因為id單一的特性，所以只會獲取到一個節點
複製成功！
const btn = document.getElementById("btn");
console.log( btn.innerHTML ); // "我是按鈕"
- 透過 元素節點 來獲取
document.getElementsByTagName("");，需注意因為 元素節點 是複數，所以會獲得一個類似陣列的物件，並以索引值代表順序
複製成功！
const btn = document.getElementsByTagName("button");
console.log( btn[0].innerHTML ); // "我是按鈕"
- 透過
class來獲取document.getElementsByClassName("");，需注意class選擇器是複數，所以會獲得一個類似陣列的物件，並以索引值代表順序
複製成功！
const btn = document.getElementsByClassName("btn");
console.log( btn[0].innerHTML ); // "我是按鈕"
- 與 jQuery 一樣方便的節點選擇器
document.querySelector("")和document.querySelectorAll("")，前面的是只會回傳第一個，後面的是只要符合條件的都會回傳，而這個回傳的是比較像陣列的 NodeList。需注意 的是，它的條件可以是 元素、id、class，所以跟 CSS 選擇器一樣，元素不需要前贅詞，id需要前贅詞#，class需要前贅詞.
複製成功！
const btn = document.querySelectorAll("#btn");
console.log( btn.innerHTML ); // "我是按鈕"
const btnAll = document.querySelectorAll(".btn");
console.log( btnAll[0].innerHTML ); // "我是按鈕"
#事件
事件就是使用者與瀏覽器互動的行為，如：點擊按鈕、滑鼠移動、控制視窗...等
我們可以事先在網頁內寫好 JavaScript 程式碼，當這些事件觸發時，就會執行程式碼，這也就是 JavaScript 負責互動的部分！
同樣的事件綁定也有很多種方法
#寫在 HTML 內
這方法其實不太好，因為 HTML 結構與 JavaScript 行為牽連在一起，會比較不方便維護，但還是認識一下！
複製成功！
<button id="btn" onclick="alert("你點到按鈕了！");">我是按鈕</button>
<!-- 這樣點擊按鈕就會跳出視窗顯示「你點到按鈕了！」 -->
#綁定事件
這是常用的方法，結構與行為分開
複製成功！
<!-- HTML -->
<button id="btn">我是按鈕</button>
獲取到節點後綁定 onclick 點擊事件
複製成功！
const btn = document.getElementById("btn"); // 獲取 btn 節點
/* 綁定 onclick 事件 */
btn.onclick = function() {
alert("你又點到按鈕了！");
}
#瀏覽器執行順序
之前第二天有介紹 script 標籤通常都放在最下面，而不會放在 head 標籤內，是因為瀏覽器在執行的時候，是由上而下執行下來。
複製成功！
<html>
<head>
<title>Document</title>
<script>
const btn = document.getElementById("btn");
console.log(btn); // null
</script>
</head>
<body>
<button id="btn">我是按鈕</button>
</body>
</html>
這時 btn 獲取到的物件節點就會回傳 null，因為它找不到節點！
而寫在下面 </body> 標籤前時
複製成功！
<html>
<head>
<title>Document</title>
</head>
<body>
<button id="btn">我是按鈕</button>
<script>
const btn = document.getElementById("btn");
console.log(btn); // <button id="btn">我是按鈕</button>
</script>
</body>
</html>
就能正常回傳 <button id="btn">我是按鈕</button> 節點了
#onload 事件
如果我一定要寫在上面呢？其實可以使用 onload 事件綁定，等**網頁畫面執行完（DOM 已經完成）**了，才執行程式碼
複製成功！
<html>
<head>
<title>Document</title>
<script>
/* 事件綁定在 window 上 */
window.onload = function(){
const btn = document.getElementById("btn");
console.log(btn); // <button id="btn">我是按鈕</button>
}
</script>
</head>
<body>
<button id="btn">我是按鈕</button>
</body>
</html>
#總結
終於要開始為我們網頁添加互動元素了！今天的 DOM 對於互動頁面非常重要，而我們還有 BOM 還沒介紹！