簡(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)用戶點(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)用戶在<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ì)在用戶進(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)用戶改變輸入字段的內(nèi)容時(shí)，會(huì)調(diào)用 upperCase() 函數(shù)。

?操作

?結(jié)果

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用戶的鼠標(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è)。