DOM
DOM（Document Object Model）譯爲文檔對象模型，是 HTML 和XML 文檔的編程接口。
HTML DOM 定義了訪問和操作 HTML 文檔的標準方法。
DOM 以樹結構表達 HTML 文檔。
什麼是 DOM？
DOM（Document Object Model） 是 W3C (World Wide Web Consortium)（萬維網聯盟）的標準。
DOM 定義了訪問 HTML 和 XML 文檔的標準：
W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態
地訪問和更新文檔的內容、結構和樣式。
W3C DOM 標準被分爲 3 個不同的部分：
- 核心 DOM - 針對任何結構化文檔的標準模型
- XML DOM - 針對 XML 文檔的標準模型
- HTML DOM - 針對 HTML 文檔的標準模型
什麼是 XML DOM？
XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。
如果您需要學習 XML DOM，請訪問 XML DOM 教程
什麼是 HTML DOM？
HTML DOM 是:
- HTML 的標準對象模型
- HTML 的標準編程接口
- W3C 標準
HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
換而言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。
HTML DOM 節點
DOM 節點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
- 整個文檔是一個文檔節點
- 每個 HTML 元素都是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 註釋是註釋節點
HTML DOM 節點樹
節點關係
節點樹中的節點彼此擁有層級關係。
我們常用父（parent）、子（child）和同胞（sibling） 等術語來描述這些關係。父節點擁有子節點，同級的節點稱爲同胞（兄弟節點）。
- 在節點樹中，頂端節點被稱爲根（root）。
- 每個節點都有父節點、除了根（它沒有父節點）。
- 一個節點可擁有任意數量的子節點。
- 同胞是擁有相同父節點的節點。
HTML DOM 對象 - 方法和屬性
方法
HTML DOM 方法是我們可以在節點（HTML 元素）上執行的動作。
常用的 HTML DOM 方法
| 方 法 | 描 述 |
|---|---|
| getElementById( ) | 獲取帶有指定 id 的節點（元素） |
| getElementsByName( ) | 返回帶有指定 name 的對象的集合 |
| getElementsByTagName( ) | 返回含有指定標籤名稱的所有元素的節點集合 |
| getElementsByClassName( ) | 返回包含帶有指定類名的所有元素的節點列表 |
屬性
HTML DOM 屬性是我們可以在節點（HTML 元素）設置和修改的值。
常用的節點屬性
| 屬性名稱 | 描 述 |
|---|---|
| parentNode | 返回節點的父節點 |
| childNodes | 返回子節點集合，childNodes[i] |
| firstChild | 返回節點的第一個子節點，最普遍的用法是訪問該元素的文本節點 |
| lastChild | 返回節點的最後一個子節點 |
| nextSibling | 下一個同胞節點 |
| previousSibling | 上一個同胞節點 |
element 屬性
| 屬性名稱 | 描 述 |
|---|---|
| firstElementChild | 返回節點的第一個子元素 |
| lastElementChild | 返回節點的最後一個元素 |
| nextElementSibling | 下個同胞元素 |
| previousElementSibling | 上一個同胞元素 |
innerHTML 屬性
innerHTML 屬性用於獲取或設置任意 HTML 元素內容。
nodeName 屬性
nodeName 屬性規定節點的名稱
- nodeName 是隻讀的
- 元素節點的 nodeName 與標籤名相同
- 屬性節點的 nodeName 與屬性名相同
- 文本節點的 nodeName 始終是 #text
- 文檔節點的 nodeName 始終是 #document
nodeValue 屬性
nodeValue 屬性規定節點的值
- 元素節點的 nodeValue 是undefined 或 null
- 文本節點的 nodeValue 是文本本身
- 屬性節點的 nodeValue 是屬性值
nodeType 屬性
nodeType 屬性返回節點的類型。nodeType 只讀。
| 節點類型 | nodeType 值 |
|---|---|
| 元素 element | 1 |
| 屬性 attr | 2 |
| 文本 text | 3 |
| 註釋 comments | 8 |
| 文檔 document | 9 |
操作節點
操作節點的屬性
語法
getAttribute("屬性名");
setAttribute("屬性名","屬性值")
創建和插入節點
| 名稱 | 描 述 |
|---|---|
| createElement(tagName) | 創建一個標籤名爲tagName的新元素節點 |
| A.appendChild(B) | 把 B 節點追加至 A 節點的末尾 |
| insertBefore(A,B) | 把 A 節點插入到 B 節點之前 |
| cloneNode(deep) | 複製某個指定的節點 |
刪除和替換節點
| 名稱 | 描 述 |
|---|---|
| removeChild(node) | 刪除指定的節點 |
| replaceChild(newNode,oldNode) | 用 newNode 替換 oldNode 節點 |
操作節點樣式
節點屬性
語法
HTML 元素.style.樣式屬性="值";
className屬性
語法
HTML 元素.className="樣式名稱"
獲取元素的樣式
語法
HTML 元素.style.樣式屬性;
HTML 元素.currentStyle.樣式屬性;//兼容IE瀏覽器
HTML 中元素屬性
| 屬性 | 描 述 |
|---|---|
| offsetLeft | 返回當前元素左邊界到它上級元素的左邊界的距離，只讀屬性 |
| offsetTop | 返回當前元素上邊界到它上級元素的上邊界的距離，只讀屬性 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的寬度 |
| offsetParent | 返回元素的偏移容器，即對最近的動態定位包含元素的引用 |
| scrollTop | 返回匹配元素的滾動條的垂直位置 |
| scrollLeft | 返回匹配元素的滾動條的水平位置 |
| clientWidth | 返回元素的可見寬度 |
| clientHeight | 返回元素的可見高度 |
歸納
