溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML DOM全解和案例

發(fā)布時(shí)間：2020-07-03 17:27:01 來(lái)源：網(wǎng)絡(luò) 閱讀：4947 作者：SnailLoveTravel 欄目：web開(kāi)發(fā)

一、HTML DOM 節(jié)點(diǎn)

在 HTML DOM 中，所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹(shù)的 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)樹(shù)

HTML DOM 將 HTML 文檔視作樹(shù)結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹(shù)：

HTML DOM Tree 實(shí)例

                   HTML DOM全解和案例


通過(guò) HTML DOM，樹(shù)中的所有節(jié)點(diǎn)均可通過(guò) JavaScript 進(jìn)行訪問(wèn)。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。

節(jié)點(diǎn)父、子和同胞

節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。

父（parent）、子（child）和同胞（sibling）等術(shù)語(yǔ)用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

  • 在節(jié)點(diǎn)樹(shù)中，頂端節(jié)點(diǎn)被稱為根（root）

  • 每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根（它沒(méi)有父節(jié)點(diǎn)）

  • 一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子

  • 同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)

下面的圖片展示了節(jié)點(diǎn)樹(shù)的一部分，以及節(jié)點(diǎn)之間的關(guān)系：                        

                          HTML DOM全解和案例

請(qǐng)看下面的 HTML 片段：

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h2>DOM 第一課</h2>
    <p>Hello world!</p>
  </body>
</html>

從上面的 HTML 中：

  • <html> 節(jié)點(diǎn)沒(méi)有父節(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 教程"

  • <h2> 和 <p> 節(jié)點(diǎn)是同胞節(jié)點(diǎn)，同時(shí)也是 <body> 的子節(jié)點(diǎn)

并且：

  • <head> 元素是 <html> 元素的首個(gè)子節(jié)點(diǎn)

  • <body> 元素是 <html> 元素的最后一個(gè)子節(jié)點(diǎn)

  • <h2> 元素是 <body> 元素的首個(gè)子節(jié)點(diǎn)

  • <p> 元素是 <body> 元素的最后一個(gè)子節(jié)點(diǎn)

警告！

DOM 處理中的常見(jiàn)錯(cuò)誤是希望元素節(jié)點(diǎn)包含文本。

在本例中：<title>DOM 教程</title>，元素節(jié)點(diǎn) <title>，包含值為 "DOM 教程" 的文本節(jié)點(diǎn)。

可通過(guò)節(jié)點(diǎn)的 innerHTML 屬性來(lái)訪問(wèn)文本節(jié)點(diǎn)的值。

您將在稍后的章節(jié)中學(xué)習(xí)更多有關(guān) innerHTML 屬性的知識(shí)。

三、HTML DOM 方法

方法是我們可以在節(jié)點(diǎn)（HTML 元素）上執(zhí)行的動(dòng)作。

編程接口

可通過(guò) JavaScript （以及其他編程語(yǔ)言）對(duì) HTML DOM 進(jìn)行訪問(wèn)。

所有 HTML 元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性。

方法是您能夠執(zhí)行的動(dòng)作（比如添加或修改元素）。

屬性是您能夠獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。

getElementById() 方法

getElementById() 方法返回帶有指定 ID 的元素：

var element=document.getElementById("intro");

例子

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write("<p>來(lái)自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

</body>
</html>

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)

您將在本教程的下一章中學(xué)到更多有關(guān)屬性的知識(shí)。

現(xiàn)實(shí)生活中的對(duì)象

某個(gè)人是一個(gè)對(duì)象。

人的方法可能是 eat(), sleep(), work(), play() 等等。

所有人都有這些方法，但會(huì)在不同時(shí)間執(zhí)行它們。

一個(gè)人的屬性包括姓名、身高、體重、年齡、性別等等。

所有人都有這些屬性，但它們的值因人而異。

一些 DOM 對(duì)象方法

這里提供一些您將在本教程中學(xué)到的常用方法：

方法描述
getElementById()返回帶有指定 ID 的元素。
getElementsByTagName()返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）。
getElementsByClassName()返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表。
appendChild()把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)。
removeChild()刪除子節(jié)點(diǎn)。
replaceChild()替換子節(jié)點(diǎn)。
insertBefore()在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)。
createAttribute()創(chuàng)建屬性節(jié)點(diǎn)。
createElement()創(chuàng)建元素節(jié)點(diǎn)。
createTextNode()創(chuàng)建文本節(jié)點(diǎn)。
getAttribute()返回指定的屬性值。
setAttribute()把指定屬性設(shè)置或修改為指定的值。

四、HTML DOM 屬性

屬性是節(jié)點(diǎn)（HTML 元素）的值，您能夠獲取或設(shè)置。

編程接口

可通過(guò) JavaScript （以及其他編程語(yǔ)言）對(duì) HTML DOM 進(jìn)行訪問(wèn)。

所有 HTML 元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性。

方法是您能夠執(zhí)行的動(dòng)作（比如添加或修改元素）。

屬性是您能夠獲取或設(shè)置的值（比如節(jié)點(diǎn)的名稱或內(nèi)容）。

innerHTML 屬性

獲取元素內(nèi)容的最簡(jiǎn)單方法是使用 innerHTML 屬性。

innerHTML 屬性對(duì)于獲取或替換 HTML 元素的內(nèi)容很有用。

實(shí)例

下面的代碼獲取 id="intro" 的 <p> 元素的 innerHTML：

實(shí)例

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>

</body>
</html>


在上面的例子中，getElementById 是一個(gè)方法，而 innerHTML 是屬性。

innerHTML 屬性可用于獲取或改變?nèi)我?HTML 元素，包括 <html> 和 <body>。

nodeName 屬性

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

注釋：nodeName 始終包含 HTML 元素的大寫字母標(biāo)簽名。

nodeValue 屬性

nodeValue 屬性規(guī)定節(jié)點(diǎn)的值。

  • 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null

  • 文本節(jié)點(diǎn)的 nodeValue 是文本本身

  • 屬性節(jié)點(diǎn)的 nodeValue 是屬性值

獲取元素的值

下面的例子會(huì)取回 <p id="intro"> 標(biāo)簽的文本節(jié)點(diǎn)值：

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

nodeType 屬性

nodeType 屬性返回節(jié)點(diǎn)的類型。nodeType 是只讀的。

比較重要的節(jié)點(diǎn)類型有：

元素類型NodeType
元 素1
屬性2
文本3
注釋8
文 檔9
 
五、HTML DOM 訪問(wèn)

訪問(wèn) HTML DOM - 查找 HTML 元素。

訪問(wèn) HTML 元素（節(jié)點(diǎn)）

訪問(wèn) HTML 元素等同于訪問(wèn)節(jié)點(diǎn)

您能夠以不同的方式來(lái)訪問(wèn) HTML 元素：

  • 通過(guò)使用 getElementById() 方法

  • 通過(guò)使用 getElementsByTagName() 方法

  • 通過(guò)使用 getElementsByClassName() 方法

getElementById() 方法

getElementById() 方法返回帶有指定 ID 的元素：

語(yǔ)法

node.getElementById("id");

下面的例子獲取 id="intro" 的元素：

實(shí)例

document.getElementById("intro");
<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write("<p>來(lái)自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

</body>
</html>

getElementsByTagName() 方法

getElementsByTagName() 返回帶有指定標(biāo)簽名的所有元素。

語(yǔ)法

node.getElementsByTagName("tagname");

下面的例子返回包含文檔中所有 <p> 元素的列表：

實(shí)例 1

document.getElementsByTagName("p");
<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script>
x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[0].innerHTML);
</script>

</body>
</html>

下面的例子返回包含文檔中所有 <p> 元素的列表，并且這些 <p> 元素應(yīng)該是 id="main" 的元素的后代（子、孫等等）：

實(shí)例 2

document.getElementById("main").getElementsByTagName("p");
<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script>

</body>
</html>

getElementsByClassName() 方法

如果您希望查找?guī)в邢嗤惷乃?HTML 元素，請(qǐng)使用這個(gè)方法：

document.getElementsByClassName("intro");

上面的例子返回包含 class="intro" 的所有元素的一個(gè)列表：

注釋：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中無(wú)效。

六、HTML DOM - 修改

修改 HTML = 改變?cè)亍傩?、樣式和事件?/p>

修改 HTML 元素

修改 HTML DOM 意味著許多不同的方面：

  • 改變 HTML 內(nèi)容

  • 改變 CSS 樣式

  • 改變 HTML 屬性

  • 創(chuàng)建新的 HTML 元素

  • 刪除已有的 HTML 元素

  • 改變事件（處理程序）

在接下來(lái)的章節(jié)，我們會(huì)深入學(xué)習(xí)修改 HTML DOM 的常用方法。

創(chuàng)建 HTML 內(nèi)容

改變?cè)貎?nèi)容的最簡(jiǎn)答的方法是使用 innerHTML 屬性。

下面的例子改變一個(gè) <p> 元素的 HTML 內(nèi)容：

實(shí)例

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

<p>上面的段落被一段腳本改變了。</p>

</body>
</html>

提示：我們將在下面的章節(jié)為您解釋例子中的細(xì)節(jié)。

改變 HTML 樣式

通過(guò) HTML DOM，您能夠訪問(wèn) HTML 元素的樣式對(duì)象。

下面的例子改變一個(gè)段落的 HTML 樣式：

實(shí)例

<html>

<body>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

創(chuàng)建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上。

實(shí)例

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("d1");
element.appendChild(para);
</script>
<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

七、HTML DOM - 修改 HTML 內(nèi)容

通過(guò) HTML DOM，JavaScript 能夠訪問(wèn) HTML 文檔中的每個(gè)元素。


改變 HTML 內(nèi)容

改變?cè)貎?nèi)容的最簡(jiǎn)答的方法是使用 innerHTML 屬性。

下面的例子更改 <p> 元素的 HTML 內(nèi)容：

實(shí)例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

<p>上面的段落被一段腳本改變了。</p>

</body>
</html>

改變 HTML 樣式

通過(guò) HTML DOM，您能夠訪問(wèn) HTML 對(duì)象的樣式對(duì)象。

下面的例子更改段落的 HTML 樣式：

實(shí)例

<html>

<body>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

使用事件

HTML DOM 允許您在事件發(fā)生時(shí)執(zhí)行代碼。

當(dāng) HTML 元素”有事情發(fā)生“時(shí)，瀏覽器就會(huì)生成事件：

  • 在元素上點(diǎn)擊

  • 加載頁(yè)面

  • 改變輸入字段

你可以在下一章學(xué)習(xí)更多有關(guān)事件的內(nèi)容。

下面兩個(gè)例子在按鈕被點(diǎn)擊時(shí)改變 <body> 元素的背景色：

實(shí)例

<html>
<body>

<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="改變背景色">

</body>
</html>

在本例中，由函數(shù)執(zhí)行相同的代碼：

實(shí)例

<html>
<body>

<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>

<input type="button" onclick="ChangeBackground()"
value="Change background color" />

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>

<input type="button" onclick="ChangeBackground()" value="改變背景色" />

</body>
</html>

下面的例子在按鈕被點(diǎn)擊時(shí)改變 <p> 元素的文本：

實(shí)例

<html>
<body>

<p id="p1">Hello world!</p>

<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>

<input type="button" onclick="ChangeText()" value="Change text">

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello world!</p>

<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>

<input type="button" onclick="ChangeText()" value="改變文本" />

</body>
</html>

八、HTML DOM - 元素

添加、刪除和替換 HTML 元素。

創(chuàng)建新的 HTML 元素 - appendChild()

如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素，然后把它追加到已有的元素上。

實(shí)例

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

例子解釋

這段代碼創(chuàng)建了一個(gè)新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您首先必須創(chuàng)建文本節(jié)點(diǎn)。這段代碼創(chuàng)建文本節(jié)點(diǎn)：

var node=document.createTextNode("This is a new paragraph.");

然后您必須向 <p> 元素追加文本節(jié)點(diǎn)：

para.appendChild(node);

最后，您必須向已有元素追加這個(gè)新元素。

這段代碼查找到一個(gè)已有的元素：

var element=document.getElementById("div1");

這段代碼向這個(gè)已存在的元素追加新元素：

element.appendChild(para);

創(chuàng)建新的 HTML 元素 - insertBefore()

上一個(gè)例子中的 appendChild() 方法，將新元素作為父元素的最后一個(gè)子元素進(jìn)行添加。

如果不希望如此，您可以使用 insertBefore() 方法：

實(shí)例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

編寫代碼：

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

刪除已有的 HTML 元素

如需刪除 HTML 元素，您必須清楚該元素的父元素：

實(shí)例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

編寫代碼：

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

例子解釋

這個(gè) HTML 文檔包含一個(gè)帶有兩個(gè)子節(jié)點(diǎn)（兩個(gè) <p> 元素）的 <div> 元素：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

查找 id="div1" 的元素：

var parent=document.getElementById("div1");

查找 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

提示：能否在不引用父元素的情況下刪除某個(gè)元素？

很抱歉。DOM 需要了解您需要?jiǎng)h除的元素，以及它的父元素。

這里提供一個(gè)常用的解決方法：找到您需要?jiǎng)h除的子元素，然后使用 parentNode 屬性來(lái)查找其父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替換 HTML 元素

如需替換 HTML DOM 中的元素，請(qǐng)使用 replaceChild() 方法：

實(shí)例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

編寫代碼：

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
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);
</script>
</body>
</html>

九、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í)。

如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，請(qǐng)把 JavaScript 代碼添加到 HTML 事件屬性中：

onclick=JavaScript

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)用戶點(diǎn)擊時(shí)，會(huì)改變 <h2> 元素的內(nèi)容：

實(shí)例

<!DOCTYPE html>
<html>
<body>
<h2 onclick="this.innerHTML='hello!'">請(qǐng)點(diǎn)擊這段文本!</h2>
</body>
</html>

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<body>

<h2 onclick="this.innerHTML='hello!'">請(qǐng)點(diǎn)擊這段文本！</h2>

</body>
</html>

在本例中，會(huì)從事件處理程序中調(diào)用函數(shù)：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h2 onclick="changetext(this)">請(qǐng)點(diǎn)擊這段文本!</h2>
</body>
</html>

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>

<h2 onclick="changetext(this)">請(qǐng)點(diǎn)擊這段文本！</h2>

</body>
</html>

HTML 事件屬性

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

實(shí)例

向 button 元素分配一個(gè) onclick 事件：

<button onclick="displayDate()">試一試</button>

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<body>

<p>點(diǎn)擊按鈕來(lái)執(zhí)行 <b>displayDate()</b> 函數(shù)。</p>

<button onclick="displayDate()">試一試</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

在上面的例子中，當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)執(zhí)行名為 displayDate 的函數(shù)。

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

HTML DOM 允許您使用 JavaScript 向 HTML 元素分配事件：

實(shí)例

為 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>點(diǎn)擊按鈕來(lái)執(zhí)行 <b>displayDate()</b> 函數(shù)。</p>

<button id="myBtn">試一試</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

在上面的例子中，名為 displayDate 的函數(shù)被分配給了 id=myButn" 的 HTML 元素。

當(dāng)按鈕被點(diǎn)擊時(shí)，將執(zhí)行函數(shù)。

onload 和 onunload 事件

當(dāng)用戶進(jìn)入或離開(kāi)頁(yè)面時(shí)，會(huì)觸發(fā) onload 和 onunload 事件。

onload 事件可用于檢查訪客的瀏覽器類型和版本，以便基于這些信息來(lái)加載不同版本的網(wǎng)頁(yè)。

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

實(shí)例

<body onload="checkCookies()">
<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("Cookies are enabled")
    }
else
    {
    alert("Cookies are not enabled")
    }
}
</script>

<p>彈出的提示框會(huì)告訴你瀏覽器是否已啟用 cookie。</p>
</body>
</html>

onchange 事件

onchange 事件常用于輸入字段的驗(yàn)證。

下面的例子展示了如何使用 onchange。當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，將調(diào)用 upperCase() 函數(shù)。

實(shí)例

<input type="text" id="fname" onchange="upperCase()">
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

請(qǐng)輸入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>當(dāng)你離開(kāi)輸入框時(shí)，被觸發(fā)的函數(shù)會(huì)把你輸入的文本轉(zhuǎn)換為大寫字母。</p>

</body>
</html>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠標(biāo)指針移動(dòng)到或離開(kāi)元素時(shí)觸發(fā)函數(shù)。

實(shí)例

一個(gè)簡(jiǎn)單的 onmouseover-onmouseout 例子：

<!DOCTYPE html>
<html>
<body>

<div 
onmouseover="mOver(this)" 
onmouseout="mOut(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>

<script>
function mOver(obj)
{
obj.innerHTML="謝謝你"
}

function mOut(obj)
{
obj.innerHTML="把鼠標(biāo)指針移動(dòng)到上面"
}
</script>

</body>
</html>

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)按鈕被松開(kāi)時(shí)，會(huì)觸發(fā) onmouseup 事件，最后，當(dāng)鼠標(biāo)點(diǎn)擊完成時(shí)，觸發(fā) onclick 事件。

實(shí)例

一個(gè)簡(jiǎn)單的 onmousedown-onmouseup 實(shí)例：

<!DOCTYPE html>
<html>
<body>

<div 
onmousedown="mDown(this)" 
onmouseup="mUp(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
點(diǎn)擊這里
</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松開(kāi)鼠標(biāo)"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="謝謝你"
}
</script>

</body>
</html>

十、HTML DOM - 導(dǎo)航

通過(guò) HTML DOM，您能夠使用節(jié)點(diǎn)關(guān)系在節(jié)點(diǎn)樹(shù)中導(dǎo)航。

HTML DOM 節(jié)點(diǎn)列表

getElementsByTagName() 方法返回節(jié)點(diǎn)列表。節(jié)點(diǎn)列表是一個(gè)節(jié)點(diǎn)數(shù)組。

下面的代碼選取文檔中的所有 <p> 節(jié)點(diǎn)：

實(shí)例

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

可以通過(guò)下標(biāo)號(hào)訪問(wèn)這些節(jié)點(diǎn)。如需訪問(wèn)第二個(gè) <p>，您可以這么寫：

y=x[1];

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用！</p>

<script>
x=document.getElementsByTagName("p");
document.write("第二段的 innerHTML 是: " + x[1].innerHTML);
</script>

</body>
</html>

注釋：下標(biāo)號(hào)從 0 開(kāi)始。

HTML DOM 節(jié)點(diǎn)列表長(zhǎng)度

length 屬性定義節(jié)點(diǎn)列表中節(jié)點(diǎn)的數(shù)量。

您可以使用 length 屬性來(lái)循環(huán)節(jié)點(diǎn)列表：

實(shí)例

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>length</b> 屬性。</p>

<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
  { 
  document.write(x[i].innerHTML);
  document.write("<br>");
  }
</script>
</body>
</html>

例子解釋：

  • 獲取所有 <p> 元素節(jié)點(diǎn)

  • 輸出每個(gè) <p> 元素的文本節(jié)點(diǎn)的值

導(dǎo)航節(jié)點(diǎn)關(guān)系

您能夠使用三個(gè)節(jié)點(diǎn)屬性：parentNode、firstChild 以及 lastChild ，在文檔結(jié)構(gòu)中進(jìn)行導(dǎo)航。

請(qǐng)看下面的 HTML 片段：

<html>
<body>

<p>Hello World!</p>
<div>
  <p>DOM 很有用!</p>
  <p>本例演示節(jié)點(diǎn)關(guān)系。</p>
</div>

</body>
</html>

  • 首個(gè) <p> 元素是 <body> 元素的首個(gè)子元素（firstChild）

  • <div> 元素是 <body> 元素的最后一個(gè)子元素（lastChild）

  • <body> 元素是首個(gè) <p> 元素和 <div> 元素的父節(jié)點(diǎn)（parentNode）

firstChild 屬性可用于訪問(wèn)元素的文本：

實(shí)例

<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

DOM 根節(jié)點(diǎn)

這里有兩個(gè)特殊的屬性，可以訪問(wèn)全部文檔：

  • document.documentElement - 全部文檔

  • document.body - 文檔的主體

實(shí)例

<html>
<body>

<p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示 <b>document.body</b> 屬性。</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 屬性。</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>

childNodes 和 nodeValue

除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來(lái)獲取元素的內(nèi)容。

下面的代碼獲取 id="intro" 的 <p> 元素的值：

實(shí)例

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>

<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

在上面的例子中，getElementById 是一個(gè)方法，而 childNodes 和 nodeValue 是屬性。

在本教程中，我們將使用 innerHTML 屬性。不過(guò)，學(xué)習(xí)上面的方法有助于對(duì) DOM 樹(shù)結(jié)構(gòu)和導(dǎo)航的理解。



向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手