HTML DOM 定義了訪問(wèn)和操作 HTML 文檔的標(biāo)準(zhǔn)。
什么是 HTML DOM蚂四？
HTML DOM 是：
- HTML 的標(biāo)準(zhǔn)對(duì)象模型
- HTML 的標(biāo)準(zhǔn)編程接口
- W3C 標(biāo)準(zhǔn)
HTML DOM 定義了所有 HTML 元素的對(duì)象和屬性，以及訪問(wèn)它們的方法迹辐。
HTML DOM 是關(guān)于如何獲取被碗、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)跨跨。
DOM 節(jié)點(diǎn)
在 HTML DOM 中，所有事物都是節(jié)點(diǎn)囱皿。DOM 是被視為節(jié)點(diǎn)樹的 HTML勇婴。
DOM 節(jié)點(diǎn)
根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：
- 整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
- 每個(gè) HTML 元素是元素節(jié)點(diǎn)
- HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
- 每個(gè) HTML 屬性是屬性節(jié)點(diǎn)
- 注釋是注釋節(jié)點(diǎn)
HTML DOM 節(jié)點(diǎn)樹
通過(guò) HTML DOM嘱腥，樹中的所有節(jié)點(diǎn)均可通過(guò) JavaScript 進(jìn)行訪問(wèn)耕渴。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)齿兔。
節(jié)點(diǎn)父橱脸、子和同胞
HTML DOM 示例
<code>
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
</code>
上面的 HTML 中：
html節(jié)點(diǎn)沒有父節(jié)點(diǎn)；它是根節(jié)點(diǎn)
head 和 <body> 的父節(jié)點(diǎn)是 <html> 節(jié)點(diǎn)
文本節(jié)點(diǎn) "Hello world!" 的父節(jié)點(diǎn)是 p節(jié)點(diǎn)
html 節(jié)點(diǎn)擁有兩個(gè)子節(jié)點(diǎn)：<head> 和 <body>
head節(jié)點(diǎn)擁有一個(gè)子節(jié)點(diǎn)：<title> 節(jié)點(diǎn)
title 節(jié)點(diǎn)也擁有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn) "DOM 教程"
head 元素是 <html> 元素的首個(gè)子節(jié)點(diǎn)
body 元素是 <html> 元素的最后一個(gè)子節(jié)點(diǎn)
p 元素是 <body> 元素的最后一個(gè)子節(jié)點(diǎn)
HTML DOM方法
方法是我們可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動(dòng)作分苇。
HTML DOM 對(duì)象 - 方法和屬性：
一些常用的 HTML DOM 方法：
- getElementById(id) - 獲取帶有指定 id 的節(jié)點(diǎn)（元素）
- appendChild(node) - 插入新的子節(jié)點(diǎn)（元素）
- removeChild(node) - 刪除子節(jié)點(diǎn)（元素）
一些常用的 HTML DOM 屬性：
- innerHTML - 節(jié)點(diǎn)（元素）的文本值
- parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)
- childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn)
- attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)
HTML DOM屬性
屬性是節(jié)點(diǎn)（HTML 元素）的值添诉，您能夠獲取或設(shè)置。
innerHTML屬性
獲取或替換HTML元素的值
nodeName屬性
規(guī)定節(jié)點(diǎn)的名稱
- nodeName 是只讀的
- 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
- 屬性節(jié)點(diǎn)的 nodeName 與屬性名相同
- 文本節(jié)點(diǎn)的 nodeName 始終是 #text
- 文檔節(jié)點(diǎn)的 nodeName 始終是 #document
nodeValue屬性
規(guī)定節(jié)點(diǎn)的值
- 元素節(jié)點(diǎn)的 nodeValue值為unfined或者null
- 文本節(jié)點(diǎn)的 nodeValue 是文本本身
- 屬性節(jié)點(diǎn)的 nodeValue 是屬性值
nodeType屬性
返回節(jié)點(diǎn)的類型医寿，nodeType是只讀的
HTML DOM 訪問(wèn)
訪問(wèn) HTML DOM - 查找 HTML 元素栏赴。
訪問(wèn)HTML元素
訪問(wèn) HTML 元素等同于訪問(wèn)節(jié)點(diǎn)
- 通過(guò)使用 getElementById() 方法
- 通過(guò)使用 getElementsByTagName() 方法
- 通過(guò)使用 getElementsByClassName() 方法
getElementByld()方法
返回帶有指定ID的元素
<code>
document.getElementByld("intro");
</code>
getElementByTagName()方法
返回帶有指定標(biāo)簽名的所有元素
<code>
x = document.getElementByTagName("p");
document.write(x[0].innerHTML);
</code>
getElementsByClassName()方法
查找?guī)в邢嗤惷乃蠬TML元素
<code>document.getElementsByClassName("intro");</code>
HTML DOM 修改
修改 HTML = 改變?cè)亍傩跃钢取邮胶褪录?/p>
修改HTML元素
- 改變 HTML 內(nèi)容
- 改變 CSS 樣式
- 改變 HTML 屬性
- 創(chuàng)建新的 HTML 元素
- 刪除已有的 HTML 元素
- 改變事件（處理程序）
改變 HTML 內(nèi)容 innerHTML
改變?cè)貎?nèi)容的最簡(jiǎn)答的方法是使用 innerHTML 屬性须眷。
<code>
document.getElementById("p1").innerHTML="New text!";
</code>
改變CSS樣式
訪問(wèn) HTML 元素的樣式對(duì)象
<code>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</code>
改變HTML屬性
如需向 HTML DOM 添加新元素乌叶，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上柒爸。
<code>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</code>
使用事件
當(dāng) HTML 元素”有事情發(fā)生“時(shí)准浴，瀏覽器就會(huì)生成事件：
- 在元素上點(diǎn)擊
- 加載頁(yè)面
- 改變輸入字段
DOM 元素
添加、刪除和替換 HTML 元素捎稚。
創(chuàng)建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素乐横，您首先必須創(chuàng)建該元素，然后把它追加到已有的元素上今野。
<code>
var para=document.createElement("p"); //創(chuàng)建文本節(jié)點(diǎn)
var node=document.createTextNode("This is new."); //向 p 元素追加文本節(jié)點(diǎn)
para.appendChild(node); //向已有元素追加這個(gè)新元素
</code>
創(chuàng)建新的HTML元素 - insertBefore()
appendChild() 方法葡公，將新元素作為父元素的最后一個(gè)子元素進(jìn)行添加。
如果不希望如此条霜，您可以使用 insertBefore() 方法催什。
刪除已有的元素
如需刪除 HTML 元素，您必須清楚該元素的父元素
<code>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</code>
當(dāng)想要?jiǎng)h除一個(gè)子元素但是不知道他的父元素的時(shí)候宰睡，可以用parentNode來(lái)查找他的父元素蒲凶。
<code>
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
</code>
替換HTML元素
<code>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</code>
HTML DOM 事件
HTML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)
對(duì)事件作出反應(yīng)
當(dāng)事件發(fā)生時(shí)，可以執(zhí)行 JavaScript拆内，比如當(dāng)用戶點(diǎn)擊一個(gè) HTML 元素時(shí)旋圆。
HTML 事件的例子：
- 當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
- 當(dāng)網(wǎng)頁(yè)已加載時(shí)
- 當(dāng)圖片已加載時(shí)
- 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
- 當(dāng)輸入字段被改變時(shí)
- 當(dāng) HTML 表單被提交時(shí)
- 當(dāng)用戶觸發(fā)按鍵時(shí)
舉例:當(dāng)鼠標(biāo)點(diǎn)擊文本時(shí)h1的內(nèi)容改變
<code><h1 onclick="this.innerHTML='hello!'">請(qǐng)點(diǎn)擊這段文本！</h1></code>
HTML事件屬性
如需向 HTML 元素分配事件麸恍，可以使用事件屬性
使用 HTML DOM 來(lái)分配事件
HTML DOM 允許使用 JavaScript 向 HTML 元素分配事件
舉例：為 button 元素分配 onclick 事件：
<code><script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script></code>
onload 和 onunload事件
當(dāng)用戶進(jìn)入或離開頁(yè)面時(shí)灵巧，會(huì)觸發(fā) onload 和 onunload 事件。
- onload 事件可用于檢查訪客的瀏覽器類型和版本抹沪，以便基于這些信息來(lái)加載不同版本的網(wǎng)頁(yè)刻肄。
- onload 和 onunload 事件可用于處理 cookies。
onchange事件
onchange 事件常用于輸入字段的驗(yàn)證融欧。
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠標(biāo)指針移動(dòng)到或離開元素時(shí)觸發(fā)函數(shù)敏弃。
onmousedown、onmouseup 以及 onclick 事件
onmousedown蹬癌、onmouseup 以及 onclick 事件是鼠標(biāo)點(diǎn)擊的全部過(guò)程权她。首先當(dāng)某個(gè)鼠標(biāo)按鈕被點(diǎn)擊時(shí)，觸發(fā) onmousedown 事件逝薪，然后，當(dāng)鼠標(biāo)按鈕被松開時(shí)蝴罪，會(huì)觸發(fā) onmouseup 事件董济，最后，當(dāng)鼠標(biāo)點(diǎn)擊完成時(shí)要门，觸發(fā) onclick 事件虏肾。
HTML DOM導(dǎo)航
通過(guò) HTML DOM廓啊，您能夠使用節(jié)點(diǎn)關(guān)系在節(jié)點(diǎn)樹中導(dǎo)航。
HTML DOM 節(jié)點(diǎn)列表
getElementsByTagName() 方法返回節(jié)點(diǎn)列表封豪。節(jié)點(diǎn)列表是一個(gè)節(jié)點(diǎn)數(shù)組谴轮。
注釋：下標(biāo)號(hào)從 0 開始。
HTML DOM 節(jié)點(diǎn)列表長(zhǎng)度
length 屬性定義節(jié)點(diǎn)列表中節(jié)點(diǎn)的數(shù)量吹埠。
導(dǎo)航節(jié)點(diǎn)關(guān)系
您能夠使用三個(gè)節(jié)點(diǎn)屬性：parentNode第步、firstChild 以及 lastChild ，在文檔結(jié)構(gòu)中進(jìn)行導(dǎo)航
DOM 根節(jié)點(diǎn)
這里有兩個(gè)特殊的屬性缘琅，可以訪問(wèn)全部文檔：
document.documentElement - 全部文檔
document.body - 文檔的主體
childNodes 和 nodeValue
除了 innerHTML 屬性粘都，您也可以使用 childNodes 和 nodeValue 屬性來(lái)獲取元素的內(nèi)容。
