iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
自我挑戰組

JavaScript基礎30天系列 第 8

DOM基礎介紹 DAY08

今天要來介紹
DOM究竟是什麼??/images/emoticon/emoticon07.gif
與如何操作DOM/images/emoticon/emoticon07.gif

讓我們先看看MDN對DOM的介紹
https://ithelp.ithome.com.tw/upload/images/20200922/20123039pl2YwLZnjW.jpg
簡單來說
DOM 是一個將 HTML文件以樹狀的結構來呈現的模型
而組合起來的樹狀圖
我們稱之為 DOM Tree

一開始我們在學習HTML時
想必對下圖都非常熟悉
https://ithelp.ithome.com.tw/upload/images/20200922/20123039DVWpBQedhe.jpg
由於
瀏覽器是從上到下一行一行的讀取
DOM tree 就是把所有的節點拆開後
彼此的關係會像一棵樹,故取名之,如下圖:
https://ithelp.ithome.com.tw/upload/images/20200922/201230391W3YosTFfG.jpg
以 Document 為起點
可以延伸出許多的 HTML 標籤
一個節點就是一個標籤
往下又可以再延伸出 text節點Attribute節點
JavaScript 就是透過 DOM API 來對 HTML 做存取與操作


這時候我們會納悶
什麼是DOM API呢!!!

讓我們可以對 HTML 的元素 (element) 進行操作
定義了 HTML 元素有哪些屬性 (Attribute) 可以來做存取
定義了 HTML 元素有哪些方法 (methods) 可以來被操作
定義了 HTML 元素事件 (events),讓我們可以針對特定元素來綁定事件處理函式(ex:鍵盤事件,滑鼠事件)

DOM 標準是由 W3C DOM 組織來制定
https://www.w3schools.com/js/js_htmldom.asp


想要透過DOM API來操做
並透過JavaScript來撰寫
可以這樣寫:
https://ithelp.ithome.com.tw/upload/images/20200922/20123039FWTpjKS321.jpg

我們舉一個例子
CodePen:
https://codepen.io/wemyferb/pen/yLOGKxL?editors=1010
會發現
我們可以透過 DOM API 選取出來的節點
並透過操作 textContent 屬性來變更它的文字
這樣就可以輸出我們想要的文字啦~~~/images/emoticon/emoticon08.gif

明天會介紹更多方法來操作DOM
今天就告一段落囉!!


上一篇
JSON DAY07
下一篇
DOM常見寫法 DAY09
系列文
JavaScript基礎30天30

尚未有邦友留言

立即登入留言