1.簡(jiǎn)介

當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。

HTML DOM 模型被構(gòu)造為對(duì)象的樹(shù)，這種結(jié)構(gòu)被稱(chēng)為節(jié)點(diǎn)樹(shù)：

?

節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。我們常用父（parent）、子（child）和同胞（sibling）等術(shù)語(yǔ)來(lái)描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱(chēng)為同胞（兄弟或姐妹）。

• 在節(jié)點(diǎn)樹(shù)中，頂端節(jié)點(diǎn)被稱(chēng)為根（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)。

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

• JavaScript 能夠改變頁(yè)面中的所有 HTML 元素

• JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性

• JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式

• JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)

2.方法和屬性

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

HTML DOM 屬性是我們可以在節(jié)點(diǎn)（HTML 元素）設(shè)置和修改的值。

一些常用的 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)

下面是一些常用方法：

方法描述

getElementById()	返回帶有指定 ID 的元素。
getElementsByTagName()	返回包含帶有指定標(biāo)簽名稱(chēng)的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）。
getElementsByClassName()	返回包含帶有指定類(lèi)名的所有元素的節(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è)置或修改為指定的值。

3.DOM 集合(Collection)

getElementsByTagName() 方法返回 HTMLCollection 對(duì)象。

HTMLCollection 對(duì)象類(lèi)似包含 HTML 元素的一個(gè)數(shù)組。

以下代碼獲取文檔所有的 <p> 元素：

var x = document.getElementsByTagName("p"); ? /*集合中的元素可以通過(guò)索引(以 0 為起始位置)來(lái)訪(fǎng)問(wèn)。訪(fǎng)問(wèn)第二個(gè) <p> 元素可以是以下代碼: */ y = x[1];

HTMLCollection 對(duì)象的 length 屬性定義了集合中元素的數(shù)量。

var myCollection = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = myCollection.length;

實(shí)例：修改所有 <p> 元素的背景顏色

var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) {myCollection[i].style.backgroundColor = "red"; }

4.修改HTML

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

• 改變 HTML 內(nèi)容

• 改變 CSS 樣式

• 改變 HTML 屬性

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

• 刪除已有的 HTML 元素

• 改變事件（處理程序）

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

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

<p id="p1">Hello World!</p><script> document.getElementById("p1").innerHTML="新文本!"; </script><p>段落通過(guò)腳本來(lái)修改內(nèi)容。</p>

改變 HTML 樣式

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

<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>

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

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

appendChild()為追加到父元素的最后一個(gè)子元素后面，如果不希望如此，也可以insertBefore()追加到父元素的第一個(gè)子元素前面。

<div id="div1"> <p id="p1">這是一個(gè)段落。</p> <p id="p2">這是另一個(gè)段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("這是一個(gè)新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>

刪除已有的 HTML 元素

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

<div id="div1"><p id="p1">這是一個(gè)段落。</p><p id="p2">這是另一個(gè)段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>

替換 HTML 元素

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

<div id="div1"> <p id="p1">這是一個(gè)段落。</p> <p id="p2">這是另外一個(gè)段落。</p> </div><script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("這是一個(gè)新的段落。"); para.appendChild(node); parent.replaceChild(para,child); </script>

事件

HTML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。

HTML 事件的例子：

• 當(dāng)用戶(hù)點(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)用戶(hù)觸發(fā)按鍵時(shí)

比如：

在本例中，當(dāng)用戶(hù)點(diǎn)擊文本時(shí)，會(huì)觸發(fā)事件改變文本。

<script> function changetext(id){id.innerHTML="Ooops!"; } </script> </head> <body><h1 onclick="changetext(this)">點(diǎn)擊文本!</h1>

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

/*為 button 元素分配 onclick 事件：*/ document.getElementById("myBtn").onclick=function(){displayDate()}; ? function displayDate() {document.getElementById("demo").innerHTML=Date(); }

5.事件匯總

下面總結(jié)一些常用的事件。

鼠標(biāo)事件

屬性描述

onclick	當(dāng)用戶(hù)點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
oncontextmenu	在用戶(hù)點(diǎn)擊鼠標(biāo)右鍵打開(kāi)上下文菜單時(shí)觸發(fā)
ondblclick	當(dāng)用戶(hù)雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
onmousedown	鼠標(biāo)按鈕被按下。
onmouseenter	當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
onmouseleave	當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)
onmousemove	鼠標(biāo)被移動(dòng)。
onmouseover	鼠標(biāo)移到某元素之上。
onmouseout	鼠標(biāo)從某元素移開(kāi)。
onmouseup	鼠標(biāo)按鍵被松開(kāi)。

鍵盤(pán)事件

屬性描述

onkeydown	某個(gè)鍵盤(pán)按鍵被按下。
onkeypress	某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。
onkeyup	某個(gè)鍵盤(pán)按鍵被松開(kāi)。

表單事件

屬性描述

onblur	元素失去焦點(diǎn)時(shí)觸發(fā)
onchange	該事件在表單元素的內(nèi)容改變時(shí)觸發(fā)( <input>, <keygen>, <select>, 和 <textarea>)
onfocus	元素獲取焦點(diǎn)時(shí)觸發(fā)
onfocusin	元素即將獲取焦點(diǎn)時(shí)觸發(fā)
onfocusout	元素即將失去焦點(diǎn)時(shí)觸發(fā)
oninput	元素獲取用戶(hù)輸入時(shí)觸發(fā)
onreset	表單重置時(shí)觸發(fā)
onsearch	用戶(hù)向搜索域輸入文本時(shí)觸發(fā) ( <input="search">)
onselect	用戶(hù)選取文本時(shí)觸發(fā) ( <input> 和 <textarea>)
onsubmit	表單提交時(shí)觸發(fā)

剪貼板事件

屬性描述

oncopy	該事件在用戶(hù)拷貝元素內(nèi)容時(shí)觸發(fā)
oncut	該事件在用戶(hù)剪切元素內(nèi)容時(shí)觸發(fā)
onpaste	該事件在用戶(hù)粘貼元素內(nèi)容時(shí)觸發(fā)

完整版事件見(jiàn)如下鏈接：https://www.runoob.com/jsref/dom-obj-event.html

總結(jié)

以上是生活随笔為你收集整理的javascript之DOM总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。