在前一篇，我們介紹完 Javascript 的語法和基本功能，包括宣告變數、條件陳述式、函式、物件陣列 ... 等等，接下來就來了解如何透過 Javascipt 操作，讓網頁互動起來。

什麼是DOM？

DOM（文件物件模型，Document Object Model），提供了一套讓 HTML、XML 文件結構化的表示法，而每個檔案最後都會形成一種DOM樹狀結構，比如一個 HTML 文件就會形成類似下圖的樣子：

DOM API

DOM 定義了一些屬性方法，讓程式可以存取並改變文件架構和內容，再結合 Javascript 的使用，就能從 HTML 文件的入口 Document 往下取得指定的 DOM 節點，來修改該元素的結構、內容、樣式。

取得網頁元素

首先要根據HTML標籤 tag、id、class 的名稱，取得對應的元素進行操作：

// 找到所有 <p> 元素。
document.getElementsByTagName("p");

// 找到 id 為 'id_name' 的元素。
document.getElementById('id_name');

// 找到所有 class 名稱為 'class_name' 的元素。
document.getElementsByClassName('class_name');

修改 HTML 內容

取得節點之後，就可以針對各種屬性去修改 HTML 的內容，比如 innerHTML、classList、setAttribute ... 等等。

• element.innerHTML：取得或設定元素內HTML的內容

let myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<p>Hello</p>";

// html會變成
//<div id="myDiv"><p>Hello</p></div>

• element.classList：讀取該元素的 Class 屬性，另外可以透過定義的一些方法修改該屬性，比如 add()、remove()、toggle()。

//取得元素 <div id="myDiv" class="default-class">
let myDiv = document.getElementById("myDiv");

//新增class
myDiv.classList.add("class1");       //class="default-class class1"

//移除class
myDiv.classList.remove("class1");    //class="default-class"

//如果指定的class不存在則添加、存在則移除
myDiv.classList.toggle("class1");    //class="default-class class1"
myDiv.classList.toggle("class1");    //class="default-class"

• element.setAttribute()：設定元素的屬性值。如果屬性已經存在則更新；不存在則添加。另外還可以透過 element.getAttribute() 取得當前的屬性值。

//取得元素 <a id="myLink" class="default-class">
let myLink = document.getElementById("myLink");

//設定該 Element 的 href 屬性
myLink.setAttribute("href","https://ithelp.ithome.com.tw/2021ironman/event");
//<a href="https://ithelp.ithome.com.tw/2021ironman/event" ...>

//設定該 Element 的 class 屬性
myLink.setAttribute("class","red");
//<a class="red" ...>

修改 Style 樣式

除了可以針對網頁結構、內容去做調整，還可以利用 element.style.cssproperty 為對應的元素新增指定的樣式：

//修改 #p1 元素的字體顏色
document.getElementById("p1").style.color = "blue";

//修改 #p2 元素的背景顏色
document.getElementById("p2").style.backgroundColor = "blue";

//修改 #p2 元素的字體大小
document.getElementById("p3").style.fontSize = "24px";

事件處理

當使用者對網頁進行操作，比如點擊按鈕、輸入文字...等等，網頁要根據這些事件（Event）去產生對應的更新。DOM 就定義了各種事件型態，讓我們可以透過 Javascript 進行事件的處理。

事件監聽器（EventListener）

負責事件處理的程式要如何連結到對應的元素上？通常會使用 addEventListener() 將事件監聽器（EventListener）註冊到指定的元素上，當監聽到指定的事件發生時，就執行對應的任務函式。

let button = document.getElementById("btn");

button.addEventListener('click', function (event) {
  //按下 button 執行
  alert('Click');
});

常用的事件

小結

Javascript 的介紹到這邊就告一個段落囉，當然不只有這些功能，還有很多東西值得探討並研究，並且它也在持續更新中。除了可以看文件、書籍、技術文章進行深入學習之外，要熟練 Javascript 很好的方式就是直接實作各種想要的功能，在過程中查找資料、解決錯誤來累積知識。 在下一篇文章我們會提到如何使用 Bootstrap 快速地建立響應式網站，那就下章再見囉！

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

參考資料

• MDN - Document
• w3schools - Javascript
• MDN - Element
• MDN - Event