DOM – Document Object Model 的縮寫,代表網頁的內容 (文件) 是一種 物件模型。
簡單的說,就是網頁文件中所有的標籤 (元素),都是物件,例如
<a>、 <img>、 <div>、 <b> … 等都是物件,元素之間的關係 (如子元素) 可以用樹狀結構來呈現。
透過網頁的物件模型,我們就可以使用 JavaScript 去選取特定的物件,改變他的屬性,甚至動態的新增、刪除物件,這就是網頁程式設計的關鍵。
DOM是一種介面的定義。
DOM的內容其實可以分為三個部份:DOM core、HTML DOM與XML DOM。
其中DOM Core是最基本的底層架構(核心),主要是將Document架構為一個樹(Tree)的概念,Tree的組成成份就是節點(Node),每個DOM必須要有一個document的根節。
每個元素在DOM裡面就是一個節點。當一個.html檔被以瀏覽器開啟的時候,瀏覽器就會去解析該檔案的DOM。由於瀏覽器可以處理html跟XML的DOM,所以也有人稱DOM檔案樹為html檔案樹或者XML檔案樹。事實上就是指 document 中元素,對應到的 JavaScript 物件,我們就統稱為 dom。
1 | var img = document.getElementById("img2"); |
這個 img 就是範例中 img 標籤對應到 JS 世界的 dom 元素。
不管是什麼DOM,都有對應的物件架構,每個物件有其屬性、方法(Method)與界面(Interface),讓外界可以讀寫其內容;對外界程式設計人員而言,這些方法界面,統稱API (Application Programming Interface)
資料來源:HTML DOM