簡(jiǎn)介?

通過(guò)HTML DOM澄步，可訪問(wèn)JavaScript HTML文檔的所有元素冰蘑。

通過(guò)可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML村缸。

?所學(xué)內(nèi)容

查找 HTML 元素

為了做到這件事情祠肥，您必須首先找到該元素。有三種方法來(lái)做這件事：

?方法

通過(guò) id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最簡(jiǎn)單的方法梯皿，是通過(guò)使用元素的 id仇箱。

本例查找 id="intro" 元素：var x=document.getElementById("intro");

?1县恕、

通過(guò)標(biāo)簽名查找 HTML 元素

實(shí)例本例查找 id="main" 的元素，然后查找 "main" 中的所有元素：

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

? 操作

?結(jié)果

JavaScript HTML DOM - 改變 HTML

HTML DOM 允許 JavaScript 改變 HTML 元素的內(nèi)容

改變 HTML 輸出流

JavaScript 能夠創(chuàng)建動(dòng)態(tài)的 HTML 內(nèi)容：

今天的日期是：Fri May 20 2016 10:22:22 GMT+0800 (CST)

在 JavaScript 中剂桥，document.write() 可用于直接向 HTML 輸出流寫(xiě)內(nèi)容忠烛。

??

提示：絕不要使用在文檔加載之后使用 document.write()。這會(huì)覆蓋該文檔渊额。

改變 HTML 內(nèi)容

修改 HTML 內(nèi)容的最簡(jiǎn)單的方法時(shí)使用 innerHTML 屬性况木。

如需改變 HTML 元素的內(nèi)容，請(qǐng)使用這個(gè)語(yǔ)法：

document.getElementById(id).innerHTML=new HTML

? ? ?例改變了<p>元素的內(nèi)容：

? 操作

?結(jié)果

? ? ? 例改變了<h1>元素的內(nèi)容：

? 操作

? 結(jié)果

改變 HTML 屬性

如需改變 HTML 元素的屬性旬迹，請(qǐng)使用這個(gè)語(yǔ)法：

document.getElementById(id).attribute=new value

?本例改變了<img>元素的 src 屬性:

?操作

?結(jié)果

JavaScript HTML DOM - 改變 CSS

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

改變 HTML 樣式

如需改變 HTML 元素的樣式求类，請(qǐng)使用這個(gè)語(yǔ)法：

document.getElementById(id).style.property=new style

?例子會(huì)改變<p>元素的樣式

?操作

?結(jié)果

例改變了 id="id1" 的 HTML 元素的樣式奔垦，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)：

?操作

?結(jié)果

?如何使元素不可見(jiàn)。您希望元素顯示或消失嗎尸疆？

Visibility

HTML DOM Style 對(duì)象參考手冊(cè)

如需完整的 HTML DOM Style 對(duì)象屬性椿猎，請(qǐng)參閱我們的 HTML DOM Style 對(duì)象參考手冊(cè)。

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力對(duì) HTML 事件做出反應(yīng)寿弱。

對(duì)事件做出反應(yīng)

? ?

? ? ? ? 當(dāng)用戶(hù)在<h1>元素上點(diǎn)擊時(shí)犯眠，會(huì)改變其內(nèi)容

?操作

? ? ? ? 本例從事件處理器調(diào)用一個(gè)函數(shù)：

?操作

?結(jié)果

HTML 事件屬性

如需向 HTML 元素分配 事件，您可以使用事件屬性症革。

例向 button 元素分配 onclick 事件：

?操作

?結(jié)果

使用 HTML DOM 來(lái)分配事件

HTML DOM 允許您通過(guò)使用 JavaScript 來(lái)向 HTML 元素分配事件：

實(shí)例向 button 元素分配 onclick 事件：

? 操作 ? 結(jié)果同上

onload 和 onunload 事件

onload 和 onunload 事件會(huì)在用戶(hù)進(jìn)入或離開(kāi)頁(yè)面時(shí)被觸發(fā)筐咧。

onload 事件可用于檢測(cè)訪問(wèn)者的瀏覽器類(lèi)型和瀏覽器版本，并基于這些信息來(lái)加載網(wǎng)頁(yè)的正確版本噪矛。

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

?操作

?結(jié)果

on change 事件

onchange 事件常結(jié)合對(duì)輸入字段的驗(yàn)證來(lái)使用。

下面是一個(gè)如何使用 onchange 的例子艇挨。當(dāng)用戶(hù)改變輸入字段的內(nèi)容時(shí)残炮，會(huì)調(diào)用 upperCase() 函數(shù)。

?操作

?結(jié)果

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用戶(hù)的鼠標(biāo)移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)缩滨。

?操作

?結(jié)果

onmousedown势就、onmouseup 以及 o'clock 事件

onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)脉漏，會(huì)觸發(fā) onmousedown 事件苞冯，當(dāng)釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmouseup 事件鸠删，最后抱完，當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí)，會(huì)觸發(fā) onclick 事件刃泡。

?操作

?結(jié)果

HTML DOM Event 對(duì)象參考手冊(cè)

如需所有 HTML DOM 事件的完整列表巧娱，請(qǐng)參閱 W3School 提供的 HTML DOM Event 對(duì)象參考手冊(cè)碉怔。