Day14. DOM:我要長得像大樹一樣高!

Day14. DOM:我要長得像大樹一樣高!

本日閱讀進度:第六章 與你的網頁互動(229~246頁)

重點摘要:

1.什麼是DOM(文件物件模型)?

DOM(Document Object Model)是你的網頁在瀏覽器中的內部表示法。當你的瀏覽器載入並解析HTML後,便會替你的頁面建立DOM,並呈現樹狀結構。

例如我們的頁面裡有html、head、body、div等元素,DOM就會長得像以下這樣: 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);
// 我要在家看漫畫

今天就介紹到這,我要來去看漫畫啦!

本文同步發表於iT邦幫忙

Recent post