本日閱讀進度：第六章 與你的網頁互動（229～246頁）

重點摘要：

1. 什麼是DOM（文件物件模型）？
   DOM（Document Object Model）是你的網頁在瀏覽器中的內部表示法。當你的瀏覽器載入並解析HTML後，便會替你的頁面建立DOM，並呈現樹狀結構。
   例如我們的頁面裡有html、head、body、div等元素，DOM就會長得像以下這樣：
   

你的JavaScript可以跟DOM互動，以便存取元素及元素中的內容。如果JavaScript修改DOM，瀏覽器會動態更新頁面，我們在頁面上就可以看到新的內容。

2. HTML如何與JavaScript溝通？
   書裡形容HTML來自火星，而JavaScript來自金星，兩者要如何溝通呢？就是透過DOM。
   更具體來說，可以使用getElementById這個方法，來找出我們想要的元素，並對此元素做一些事情。
   假設有一個段落p，它的id是"sunday"，這個段落包著一段文字我想出去玩，你想要改成我要在家看漫畫，就可以這樣做：

document.getElementById("sunday");
var otaku = document.getElementById("sunday");
otaku.innerHTML = "我要在家看漫畫";

這樣瀏覽器上就會顯示我要在家看漫畫了。

3. 從DOM取得的是什麼？
   使用getElementById從DOM取得一個元素時，所得到的是一個元素物件（element object），我們可以對它做：

• 取得文字或HTML等內容
• 變更內容
• 取得一個屬性
• 添加一個屬性
• 變更一個屬性
• 移除一個屬性

4. innerHTML是什麼？
   innerHTML是一個重要的屬性，我們可以用它來讀取或取代元素的內容。
   取代元素我們剛剛已經示範過了，來看看怎麼讀取。

var otaku = document.getElementById("sunday");
console.log(otaku.innerHTML);
// 我要在家看漫畫

今天就介紹到這，我要來去看漫畫啦！

本文同步發表於cichen