基本介紹
- 中文名：文檔對象模型
- 外文名：HTML Document Object Model
- 簡寫：HTML DOM
- 適用：專門適用於HTML/XHTML
相關介紹,節點信息,HTML DOM 方法,編程接口,HTML DOM 對象 - 方法和屬性,一些 DOM 對象方法,
相關介紹
DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範，DOM是一種與瀏覽器，平台，語言無關的接口，使得你可以訪問頁面中其他的標準組件。簡單理解，DOM解決了Netscape的JavaScript和 Microsoft的JavaScript之間的衝突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對象。
DOM是以層次結構組織的節點或信息片斷的集合。這個層次結構允許開發人員在樹中導航尋找特定信息。分析該結構通常需要載入整個文檔和構造層次結構，然後才能做任何工作。由於它是基於信息層次的，因而 DOM 被認為是基於樹或基於對象的。
HTML DOM 定義了訪問和操作HTML文檔的標準方法。
HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
節點信息
在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
每個節點都擁有包含著關於節點某些信息的屬性。這些屬性是：
nodeName（節點名稱）nodeValue（節點值）nodeType（節點類型）
根據W3C的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
- 整個文檔是一個文檔節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 注釋是注釋節點
HTML DOM 方法
方法是我們可以在節點（HTML 元素）上執行的動作。
編程接口
可通過 JavaScript （以及其他程式語言）對 HTML DOM 進行訪問。
所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。
方法是您能夠執行的動作（比如添加或修改元素）。
屬性是您能夠獲取或設定的值（比如節點的名稱或內容）。
HTML DOM 對象 - 方法和屬性
一些常用的 HTML DOM 方法：
- getElementById(id) - 獲取帶有指定 id 的節點（元素）
- appendChild(node) - 插入新的子節點（元素）
- removeChild(node) - 刪除子節點（元素）
一些常用的 HTML DOM 屬性：
- innerHTML - 節點（元素）的文本值
- parentNode - 節點（元素）的父節點
- childNodes - 節點（元素）的子節點
- attributes - 節點（元素）的屬性節點
一些 DOM 對象方法
下面列出一些常用的 DOM 對象方法：
| 方法 | 描述 |
|---|---|
getElementById() | 返回帶有指定 ID 的元素。 |
getElementsByTagName() | 返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點數組）。 |
getElementsByClassName() | 返回包含帶有指定類名的所有元素的節點列表。 |
appendChild() | 把新的子節點添加到指定節點。 |
removeChild() | 刪除子節點。 |
replaceChild() | 替換子節點。 |
insertBefore() | 在指定的子節點前面插入新的子節點。 |
createAttribute() | 創建屬性節點。 |
createElement() | 創建元素節點。 |
createTextNode() | 創建文本節點。 |
getAttribute() | 返回指定的屬性值。 |
setAttribute() | 把指定屬性設定或修改為指定的值。 |
