※ 認識DOM(一)

閱讀時間約 2 分鐘

※ DOM是什麼?

DOM 全名為 Document Object Model 中文翻譯為 文件物件模型,就是把一份 HTML 文件內的各個標籤,包括文字、圖片等等都定義成物件,而這些物件最終會形成一個樹狀結構。

就 Document Object Model 這個名字來說,其中 document 指的是瀏覽器裡的 HTML 網頁,而 object model 示意如下圖:

raw-image

說明:

  • 瀏覽器載入 HTML 以後,會進一步把 HTML 的語法結構,解析成為上圖右的物件模型。
  • 就屬性來說明:
  1. object model 和 HTML 文件的結構是一致的。
  2. 以 p 和 em 為例,在物件模型裡形成了父子階層關係。
  • 任何在網頁裡出現的內容,無論看得到或看不到的,都會被解析成為 DOM 的一部分,包含註解。
  • 當網頁變成了上圖右的物件模型以後,就可以用 JavaScript 來操作網頁元素。
  • 簡單說「DOM 是瀏覽器開放給程式語言操作網頁元素的一種介面」。

※ 樹狀結構是什麼?

樹狀結構是資料結構的一種,特色是有明確的父子階層關係,也因為階層關係明確,按相對關係查找資料特別方便。因此DOM 採用樹狀結構 (tree) 來儲存網頁元素。

raw-image

※ 樹狀結構內容

就節點在 DOM 樹中的角色和功能來說,樹狀裡每一個部分叫做「節點 (node)」,節點有四種類型:

  • 元素節點 (element node)
  • 文字節點 (text node)
  • 屬性節點 (attribute node)
  • 註解節點 (comment node)

※ 根節點:document是什麼?

在 DOM 的樹狀結構裡,根節點是 document,代表網頁的本身。

※結論:

  • Document Object Model (DOM) 是一個 API,允許程序動態操作 HTML 和 XML 文檔的內容和結構。
  • DOM是一種樹狀結構(Tree Structure)由多個節點(Node)組成。
  • 從更廣泛的層面來描述,節點(Node)分成整個文檔(Document)、元素(Element)、屬性(Attribute)和文本內容(Text)四種組成。
    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    認識 JavaScript (十五)
    閱讀時間約 9 分鐘
    ※ 認識非同步概念(一)
    閱讀時間約 3 分鐘
    ※ 認識非同步概念(二)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(三)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(四)
    閱讀時間約 6 分鐘
    ※ 認識非同步概念(五)
    閱讀時間約 1 分鐘