What's DOM?!
DOM是由W3C所制定出來的樹狀結構API。
DOM (Document Object Model)可以想成HTML XML等相關文件都是一種DOM，而文件中的每個tag都是DOM中的元素(element)或節點(node)。
操作 DOM 物件是建構 Web UI 的基礎。
網頁設計人員可操作及建立文件的屬性、方法及事件都以[物件]來展現（例如，document 就代表「文件本身」這個物件，table 物件則代表 HTML 的表格物件等等）。這些物件可以由當今大多數的瀏覽器以 Script 來取用。
DOM 最常被用來與 JavaScript 溝通，也就是說雖然程式是以 JavaScript 形式寫成，但卻使用 DOM 來存取頁面及其元素。
DOM 其實本身是被設計為一種獨立的存取結構，可以用一致的 API 來存取文件的結構與資料；所以 DOM 是可以與任何程式語言共同運作。
JavaScript中取得DOM中元素的API ：
document.getElementById：在DOM中尋找ID為輸入值的元素
document.getElementsByTagName: 傳回一個陣列內元素tag名稱與輸入值相等的陣列。
document.getElementsByName: 傳回一個陣列內元素name屬性與輸入相等的陣列
使用原生Javascript API來操作DOM顯然相當費力，因此類似jQuery這種框架能直接用 CSS selector 的方式來選擇並操作物件。
DOM的目標之一就是為了給HTML與XML共同定義，而且相容的的物件模型。
在DOM當中，XML文件被表示成樹狀結構，它的節點為元素、文字等。
一個XML處理器產生樹狀結構，並將它傳送給應用程式。
一個DOM為基礎的XML處理器在記憶體中產生XML文件的結構。
所有在DOM中的節點皆被視為一個物件。
而DOM以部分標準物件的形式定義了一個與平台和語言無相關性的介面，提供應用程式來使用。
而DOM為了與Java、JavaScript、Object Management(OMG)的IDL(Interface Definition Language)溝通，定義一個API作為彼此溝通的橋梁。
DOM API是由一群界面所集合，而且可以被拿來實作，而結點是最基本的資料結構，而整顆DOM樹也是由元素、文字、屬性這些介面所組成的。
基本定義介面如下：
Attr
表示在元素物件中的屬性
CDATASection
表示文件中的 CDATA 區段。
CharacterData
文字或其他型別的父介面，包含插入與刪除字串等運算
Comment
注解
Document
整份文件
DocumentFragment
表示子樹或是部分文件，輕量的文件物件
DocumentType
表示包含一連串的Entity的DTD
DOMException
無法繼續處理時發出的例外
DOMImplementation
用來收集不依賴特定DOM實作的方法
Element
表示一個元素與任何被控制的節點
Entity
表示實體
EntityReference
表示在文件樹中某實體的參照
Node
文件數中代表節點最主要的資料型別
NodeList
表示有次序的節點集
NamedNodeMap
名稱節點對映
Notation
表示DTD中的符號宣告ProcessingInstruction
表示處理指令
Text
文字
產生一棵不讀取外部文件的DOM樹，順序如下：
1.先產生一個org.w3c.dom.Document物件
2.產生文件元素(根元素)
3.將文件元素加到Document物件當作它的子節點
4.產生元素與他的屬性、文字、注解節點，建立一棵DOM樹
DOM (Document Object Model)可以想成HTML XML等相關文件都是一種DOM，而文件中的每個tag都是DOM中的元素(element)或節點(node)。
操作 DOM 物件是建構 Web UI 的基礎。
網頁設計人員可操作及建立文件的屬性、方法及事件都以[物件]來展現（例如，document 就代表「文件本身」這個物件，table 物件則代表 HTML 的表格物件等等）。這些物件可以由當今大多數的瀏覽器以 Script 來取用。
DOM 最常被用來與 JavaScript 溝通，也就是說雖然程式是以 JavaScript 形式寫成，但卻使用 DOM 來存取頁面及其元素。
DOM 其實本身是被設計為一種獨立的存取結構，可以用一致的 API 來存取文件的結構與資料；所以 DOM 是可以與任何程式語言共同運作。
JavaScript中取得DOM中元素的API ：
document.getElementById：在DOM中尋找ID為輸入值的元素
document.getElementsByTagName: 傳回一個陣列內元素tag名稱與輸入值相等的陣列。
document.getElementsByName: 傳回一個陣列內元素name屬性與輸入相等的陣列
使用原生Javascript API來操作DOM顯然相當費力，因此類似jQuery這種框架能直接用 CSS selector 的方式來選擇並操作物件。
DOM的目標之一就是為了給HTML與XML共同定義，而且相容的的物件模型。
在DOM當中，XML文件被表示成樹狀結構，它的節點為元素、文字等。
一個XML處理器產生樹狀結構，並將它傳送給應用程式。
一個DOM為基礎的XML處理器在記憶體中產生XML文件的結構。
所有在DOM中的節點皆被視為一個物件。
而DOM以部分標準物件的形式定義了一個與平台和語言無相關性的介面，提供應用程式來使用。
而DOM為了與Java、JavaScript、Object Management(OMG)的IDL(Interface Definition Language)溝通，定義一個API作為彼此溝通的橋梁。
DOM API是由一群界面所集合，而且可以被拿來實作，而結點是最基本的資料結構，而整顆DOM樹也是由元素、文字、屬性這些介面所組成的。
基本定義介面如下：
Attr
表示在元素物件中的屬性
CDATASection
表示文件中的 CDATA 區段。
CharacterData
文字或其他型別的父介面，包含插入與刪除字串等運算
Comment
注解
Document
整份文件
DocumentFragment
表示子樹或是部分文件，輕量的文件物件
DocumentType
表示包含一連串的Entity的DTD
DOMException
無法繼續處理時發出的例外
DOMImplementation
用來收集不依賴特定DOM實作的方法
Element
表示一個元素與任何被控制的節點
Entity
表示實體
EntityReference
表示在文件樹中某實體的參照
Node
文件數中代表節點最主要的資料型別
NodeList
表示有次序的節點集
NamedNodeMap
名稱節點對映
Notation
表示DTD中的符號宣告ProcessingInstruction
表示處理指令
Text
文字
產生一棵不讀取外部文件的DOM樹，順序如下：
1.先產生一個org.w3c.dom.Document物件
2.產生文件元素(根元素)
3.將文件元素加到Document物件當作它的子節點
4.產生元素與他的屬性、文字、注解節點，建立一棵DOM樹
留言
張貼留言