目錄
一呜叫、HTML DOM 樹
1. HTML DOM 樹
2. 節(jié)點
二郑什、常用 DOM 對象屬性與方法
1. 方法
2. 屬性
三惭聂、DOM操作
四、DOM事件
五袱吆、總結(jié)
一厌衙、HTML DOM 樹
1. HTML DOM 樹
DOM即是Document Object Model（文檔對象模型）的縮寫。簡單地講绞绒，HTML DOM 定義了訪問和操作 HTML 文檔的標(biāo)準(zhǔn)方法婶希，DOM 將 HTML 文檔表達為樹結(jié)構(gòu)。換言之蓬衡，HTML DOM 是關(guān)于如何獲取喻杈、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)狰晚。
如下圖1.1即為一個HTML文檔的DOM結(jié)構(gòu)圖示筒饰。
2. 節(jié)點
在 HTML DOM 中，所有的事物都是節(jié)點壁晒。因而瓷们，上面圖中，這棵樹有許多的節(jié)點構(gòu)成秒咐，所以也可以叫做節(jié)點樹谬晕。如整個文檔 Document 可以看做一個節(jié)點；HTML 元素携取，如 head攒钳、body、div 等也可以看做一個節(jié)點歹茶；同樣夕玩，HTML 元素內(nèi)的文本及 HTML 屬性也可以看做文本節(jié)點與屬性節(jié)點你弦；甚至注釋也可以看做注釋節(jié)點。
節(jié)點樹中的節(jié)點與節(jié)點之間之間擁有層級關(guān)系燎孟，如下圖1.2所示禽作。
如下面的代碼：
<!DOCTYPE html>
<head>
<title>我是標(biāo)題</title>
</head>
<body>
<h1>認(rèn)識 HTML DOM </h1>
<p>Hello world!</p>
</body>
</html>
從上面的 HTML 中可以看出：
- <html> 節(jié)點沒有父節(jié)點；它是根節(jié)點
- <head> 和 <body> 的父節(jié)點是 <html> 節(jié)點揩页，<html> 節(jié)點擁有兩個子節(jié)點<head> 和 <body>
- 文本節(jié)點 "Hello world!" 的父節(jié)點是 < p > 節(jié)點
- < h1 > 和 < p > 節(jié)點是同胞節(jié)點旷偿，同時也是 <body> 的子節(jié)點
二、常用 DOM 對象屬性與方法
1.方法
方法就是可以在節(jié)點（HTML 元素）上執(zhí)行的動作爆侣。
下面是一些比較常用的 DOM 對象方法：
- getElementById(id)：返回帶有指定 ID 的元素萍程。
- getElementsByTagName(tag name)：返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點列表（集合/節(jié)點數(shù)組）。
- getElementsByClassName(class name)：返回包含帶有指定類名的所有元素的節(jié)點列表兔仰。
- appendChild(node)：把新的子節(jié)點添加到指定節(jié)點茫负。
- removeChild(node)：刪除子節(jié)點。
- replaceChild(node)：替換子節(jié)點乎赴。
- insertBefore(node)：在指定的子節(jié)點前面插入新的子節(jié)點忍法。
- createAttribute()：創(chuàng)建屬性節(jié)點。
- createElement()：創(chuàng)建元素節(jié)點榕吼。
- createTextNode()：創(chuàng)建文本節(jié)點饿序。
- getAttribute(attribute)：返回指定的屬性值。
- setAttribute(attribute,value)：把指定屬性設(shè)置或修改為指定的值羹蚣。
2.屬性
屬性是節(jié)點（HTML 元素）的值原探，您能夠獲取或設(shè)置。
下面主要介紹比較常見的幾個節(jié)點屬性：
(1).innerHTML：元素內(nèi)容
如下面的代碼可以獲取類名為“intro”的節(jié)點的內(nèi)容值顽素，并將它賦給變量txt：
var txt=document.getElementById("intro").innerHTML;
(2).nodeName：節(jié)點名稱
- 元素節(jié)點：標(biāo)簽名
- 屬性節(jié)點：屬性名
- 文本節(jié)點：#text
- 文檔節(jié)點：#document
(3).nodeValue：節(jié)點的值
- 元素節(jié)點： undefined 或 null
- 文本節(jié)點：文本本身
- 屬性節(jié)點：屬性值
如下面的代碼獲取 ID 為 intro 的元素的文本節(jié)點的值咽弦，并將它寫入文檔輸出流中：
document.write($("#intro").firstChild.nodeValue);
(4).nodeType：節(jié)點的類型
各種節(jié)點類型與對應(yīng)的 nodeType 值為：元素：1；屬性：2戈抄；文本：3离唬；注釋：8；文檔：9划鸽。
(5).parentNode输莺、firstChild、lastChild：節(jié)點之間的關(guān)系
依次為訪問元素的父節(jié)點裸诽、第一個子節(jié)點嫂用、最后一個子節(jié)點。
(6).length:節(jié)點列表長度
如下面的代碼丈冬，獲取標(biāo)簽為 p 的節(jié)點組成一個節(jié)點列表嘱函，將該節(jié)點列表中的每一個元素的內(nèi)容值寫到文檔輸出流中：
x = document.getElementsByTagName("p");
for (i=0;i<x.length;i++) {
document.write(x[i].innerHTML);
document.write("<br />");
}
三、DOM操作
通過 DOM 的相關(guān)方法埂蕊，可以修改 HTML往弓，包括改變元素疏唾、屬性、樣式和事件等函似。
如：
document.getElementById("p1").innerHTML = "New text!";//修改 p1 元素文本節(jié)點的內(nèi)容
document.getElementById("p2").style.color="blue";//修改 p2 元素的樣式
var para = document.createElement("p");//接下來三句創(chuàng)建了新的元素如需向 HTML DOM 添加新元素槐脏，
var node = document.createTextNode("This is new.");//首先必須創(chuàng)建該元素（元素節(jié)點），
para.appendChild(node);//然后把它追加到已有的元素上撇寞。
除了 appendChild() 函數(shù)向一個父元素后面追加一個子元素之外顿天，添加新元素也可以使用 insertBefore() 函數(shù)，直接往一個已存在的元素前面插入一個新元素：
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);//將新創(chuàng)建的元素 para 插入到已存在的元素 child 前面蔑担，但前提是他們用共同的父元素 element
當(dāng)然牌废，通過相關(guān)方法也可以刪除一個元素：
var parent=document.getElementById("div1");//要刪除一個元素，首先要獲取要刪除元素的父元素
var child=document.getElementById("p1");
parent.removeChild(child);
最后啤握，若將上面代碼的最后一句換為下面這句鸟缕，則可以實現(xiàn)將 child 元素替換為 para 元素的操作。
parent.replaceChild(para,child);
由此可見排抬，通過 DOM 可以十分方便地實現(xiàn)對 HTML 的各種操作叁扫，顯得十分強大與靈活。
四畜埋、DOM事件
當(dāng)事件發(fā)生時，比如當(dāng)用戶點擊一個 HTML 元素時畴蒲，可以執(zhí)行相關(guān)的 JavaScript悠鞍，這時，需要把 JavaScript 代碼添加到 HTML 事件屬性中模燥。
下面是一些常見的事件屬性：
- 當(dāng)用戶點擊鼠標(biāo)時：onclick
- 當(dāng)網(wǎng)頁已加載時：onload
- 當(dāng)元素獲得焦點時：onfocus
- 當(dāng)鼠標(biāo)移動到元素上與鼠標(biāo)離開時：onmouseover與onmouseout
- 鼠標(biāo)按鍵按下與松開時：onmousedown與onmouseup
如下面的代碼咖祭，點擊按鈕時，會執(zhí)行函數(shù) function() 里面的的 JavaScript 代碼：
<button onclick = "displayDate()">顯示時間</button>//鼠標(biāo)點擊按鈕時執(zhí)行displayDate() 函數(shù)
document.getElementById("myBtn").onclick = function(){……};//點擊按鈕執(zhí)行函數(shù) function 里面的 JavaScript 代碼
五蔫骂、總結(jié)
HTML DOM 可以實現(xiàn)在客戶端使用腳本來創(chuàng)建動態(tài)網(wǎng)頁么翰，以此增強網(wǎng)頁的交互性。上面介紹的是一些最常用的 DOM 的使用辽旋，具體的可以在實際的實踐中浩嫌，以及不斷的查手冊增強了解。
