JS HTML DOM

dom 是 w3c（網際網路聯盟）的标準。dom 定義了通路 html 和 xml 文檔的标準：

"w3c 文檔對象模型 （dom） 是中立于平台和語言的接口，它允許程式和腳本動态地通路和更新文檔的内容、結構和樣式。"

w3c dom 标準被分為 3 個不同的部分：

核心 dom - 針對任何結構化文檔的标準模型

xml dom - 針對 xml 文檔的标準模型

html dom - 針對 html 文檔的标準模型

注意：dom 是 document object model（文檔對象模型）的縮寫

html dom 是：

html 的标準對象模型；html 的标準程式設計接口；w3c 标準

html dom 定義了所有 html 元素的對象和屬性，以及通路它們的方法。換言之，html dom 是關于如何擷取、修改、添加或删除 html 元素的标準

通過 html dom，可通路 javascript html 文檔的所有元素

當網頁被加載時，浏覽器會建立頁面的文檔對象模型（document object model）。

通過可程式設計的對象模型，javascript 獲得了足夠的能力來建立動态的 html

javascript 能夠改變頁面中的所有 html 元素

javascript 能夠改變頁面中的所有 html 屬性

javascript 能夠改變頁面中的所有 css 樣式

javascript 能夠對頁面中的所有事件做出反應

在 html dom 中，所有事物都是節點。dom 是被視為節點樹的 html

根據 w3c 的 html dom 标準，html 文檔中的所有内容都是節點：

整個文檔是一個文檔節點。每個 html 元素是元素節點。html 元素内的文本是文本節點。每個 html 屬性是屬性節點。注釋是注釋節點

節點樹中的節點彼此擁有層級關系。父（parent）、子（child）和同胞（sibling）等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱為根（root）。每個節點都有父節點、除了根（它沒有父節點）。一個節點可擁有任意數量的子。同胞是擁有相同父節點的節點

這裡有兩個特殊的屬性，可以通路全部文檔：

document.documentelement - 全部文檔

document.body - 文檔的主體

通常，通過javascript，您需要操作 html 元素。為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

1.通過 id 找到 html 元素

在 dom 中查找 html 元素的最簡單的方法，是通過使用元素的 id

如果找到該元素，則該方法将以對象（在 x 中）的形式傳回該元素。如果未找到該元素，則 x 将包含 null

2.通過标簽名找到 html 元素

3.通過類名找到 html 元素

html dom 允許 javascript 改變 html 元素的内容

javascript 能夠建立動态的 html 内容：

絕對不要在文檔加載完成之後使用 document.write()。這會覆寫該文檔

修改 html 内容的最簡單的方法時使用 innerhtml 屬性。

如需改變 html 元素的内容，請使用這個文法：

除了 innerhtml 屬性，您也可以使用 childnodes 和 nodevalue 屬性來擷取元素的内容

如需改變 html 元素的屬性，請使用這個文法：

例如：

方法

描述

getelementbyid()

傳回帶有指定 id 的元素

getelementsbytagname()

傳回包含帶有指定标簽名稱的所有元素的節點清單（集合/節點數組）

getelementsbyclassname()

傳回包含帶有指定類名的所有元素的節點清單

appendchild()

把新的子節點添加到指定節點

removechild()

删除子節點

replacechild()

替換子節點

insertbefore()

在指定的子節點前面插入新的子節點

createattribute()

建立屬性節點

createelement()

建立元素節點

createtextnode()

建立文本節點

getattribute()

傳回指定的屬性值

setattribute()

把指定屬性設定或修改為指定的值

innerhtml - 節點（元素）的文本值

parentnode - 節點（元素）的父節點

childnodes - 節點（元素）的子節點

attributes - 節點（元素）的屬性節點

html dom 允許 javascript 改變 html 元素的樣式

文法：

html dom 使 javascript 有能力對 html 事件做出反應

如需向 html 元素配置設定 事件，您可以使用事件屬性。

在上面的例子中，名為 displaydate 的函數将在按鈕被點選時執行

html dom 允許您使用 javascript 來向 html 元素配置設定事件：

在上面的例子中，名為 displaydate 的函數被配置設定給 id=mybutn" 的 html 元素。

按鈕點選時javascript函數将會被執行

onload 和 onunload 事件會在使用者進入或離開頁面時被觸發

onload 事件可用于檢測通路者的浏覽器類型和浏覽器版本，并基于這些資訊來加載網頁的正确版本

onload 和 onunload 事件可用于處理 cookie。

onchange 事件常結合對輸入字段的驗證來使用。

下面是一個使用onchange的例子。當使用者改變輸入字段的内容時，會調用uppercase()函數

onmouseover和onmouseout事件可用于在使用者的滑鼠移至html元素上方或移出元素時觸發函數

onmousedown, onmouseup以及onclick構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時會觸發onmousedown事件，當釋放滑鼠按鈕時，會觸發onmouseup事件，最後，當完成滑鼠點選時，會觸發onclick事件

addeventlistener()方法用于向指定元素添加事件句柄

addeventlistener()方法添加的事件句柄不會覆寫已存在的事件句柄

可以向一個元素添加多個事件句柄

可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件

可以向任何dom對象添加事件監聽，不僅僅是html元素。如：window對象

addeventlistener()方法可以更簡單的控制事件（冒泡與捕獲）

當你使用addeventlistener()方法時, javascript從html标記中分離開來，可讀性更強， 在沒有控制html标記時也可以添加事件監聽

你可以使用removeeventlistener()方法來移除事件的監聽。

第一個參數是事件的類型 (如 "click" 或 "mousedown")

第二個參數是事件觸發後調用的函數

第三個參數是個布爾值用于描述事件是冒泡還是捕獲。該參數是可選的

可以使用函數名，來引用外部函數:

addeventlistener() 方法允許向同個元素添加多個事件，且不會覆寫已存在的事件：

也可以向同個元素添加不同類型的事件：

addeventlistener()方法允許在html dom對象添加事件監聽，html dom對象如：html元素, html文檔, window對象。或者其他支出的事件對象如:xmlhttprequest對象。

當使用者重置視窗大小時添加事件監聽：

當傳遞參數值時，使用"匿名函數"調用帶參數的函數：

事件傳遞有兩種方式：冒泡與捕獲

事件傳遞定義了元素事件觸發的順序。 如果你将 <code>&lt;p&gt;</code> 元素插入到<code>&lt;div&gt;</code>元素中，使用者點選<code>&lt;p&gt;</code>元素, 哪個元素的 "click" 事件先被觸發呢？

在 冒泡 中，内部元素的事件會先被觸發，然後再觸發外部元素，即：<code>&lt;p&gt;</code>元素的點選事件先觸發，然後會觸發<code>&lt;div&gt;</code>元素的點選事件

在捕獲中，外部元素的事件會先被觸發，然後才會觸發内部元素的事件，即：<code>&lt;div&gt;</code>元素的點選事件先觸發 ，然後再觸發<code>&lt;p&gt;</code>元素的點選事件

addeventlistener() 方法可以指定 "usecapture" 參數來設定傳遞類型：

預設值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞

removeeventlistener() 方法移除由 addeventlistener() 方法添加的事件句柄:

例子：

注意：ie8及更早ie版本，opera7.0及其更早版本不支援addeventlistener()和removeeventlistener()方法。但是，對于這類浏覽器版本可以使用detachevent()方法來移除事件句柄:

html dom事件允許javascript在html文檔元素中注冊不同僚件處理程式，事件通常與函數結合使用，函數不會在事件發生前被執行！(如使用者點選按鈕)

dom

initmouseevent()

初始化滑鼠事件對象的值

2

initkeyboardevent()

初始化鍵盤事件對象的值

3

如需向 html dom 添加新元素，您必須首先建立該元素（元素節點），然後向一個已存在的元素追加該元素

如果能夠在不引用父元素的情況下删除某個元素，就太好了。不過很遺憾。dom 需要清楚您需要删除的元素，以及它的父元素。這是常用的解決方案：找到您希望删除的子元素，然後使用其 parentnode 屬性來找到父元素：