天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

DOM是什麼?文件物件模型基礎介紹|天矽科技客製化網頁設計

部落格:DOM是什麼?文件物件模型基礎介紹|天矽科技客製化網頁設計

 

DOM是文件物件模型,提供標記式語言(XML/HTML)的標準程式介面,模型將HTML架構節點拆開,延伸並重新定義成物件,最後形成一個樹狀的結構。

DOM是什麼

 

 在網頁設計中,常聽到的DOM是什麼?

 DOM (Document Object Model) 文件物件模型,是 W3C 推薦處理標記式語言( XML/HTML) 的標準程式介面。它將HTML文件結構化,並以樹狀結構來表示的模型介面,意即「文件物件模型」。

 該模型將HTML的架構節點拆開,並以Document為起點,延伸出許多的HTML標籤,並將文件中的各個標籤都定義成物件,這些物件最後就會形成一個樹狀的結構。

※ W3C推薦標準連結:W3C DOM

HTML架構

▲HTML架構

 

DOM文件物件模型

▲DOM文件物件模型

 

DOM使用

 DOM最常被用來與JavaScript溝通,也就是網頁使用 JavaScript 撰寫,使用 DOM 來存取頁面與元素,簡單來說就是用 JavaScript來操作HTML元素的概念。

 DOM是一套獨立的語言,不是JavaScript的一部份,雖然不常見,但DOM同樣也可以被其他的語言存取。

 它的用處再於獲取元素(Element)的節點、給元素連結事件、設定元素屬性及元素的樣式,也可動態建立和刪除元素。

 

DOM節點

 

 現在我們知道 DOM會形成一個樹狀的結構且擁有各個節點,而其節點通常分為四種,包括 DocumentElementTextAttribute

  • Document(文件)
    Document是HTML文件的開端,所有標籤都會由此向下延伸。

  • Element(元素)
    Element是文件的各種標籤,像是<head>、<body>、<p>或是<div>等,都屬於Element元素節點。

  • Text(文本)
    指的是被標籤包起來的文字
    像是本節點標題「DOM節點」的後端語法是<h3>DOM節點</h3>,而其中被Element元素包起來的文字就是Text文本。

  • Attribute(屬性)
    指的是各個標籤內的相關屬性,用來敘述Element元素的相關性質,這種附加在 Element元素上的東西就稱為Attribute屬性。

DOM節點

▲DOM節點

 

參考資料:
chenmike學習日誌
IT邦幫忙|Day03-深入理解網頁架構:DOM
提姆寫程式
MDN Web Docs
維基百科|文件物件模型

 

回上一頁
信箱
客服
Line@