DOM操作

1.什么是DOM

DOM 是 Document Object Model(文檔對(duì)象模型)的縮寫。

DOM是中立于平臺(tái)和語言的接口,它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。

在 HTML DOM中,所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹的 HTML。

2.什么是DOM節(jié)點(diǎ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)

3.常見的DOM屬性

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

innerHTML 屬性

nodeName 屬性

nodeName 屬性規(guī)定節(jié)點(diǎn)的名稱

元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同

屬性節(jié)點(diǎn)的 nodeName 與屬性名相同

文本節(jié)點(diǎn)的 nodeName 始終是 #text

文檔節(jié)點(diǎn)的 nodeName 始終是 #document

nodeValue 屬性

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

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

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

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

4.訪問元素的方法

通過使用 getElementById() 方法

通過使用 getElementsByTagName() 方法

通過使用 getElementsByClassName() 方法

5.修改元素的方法

改變 HTML 內(nèi)容

document.getElementById("p1").innerHTML="New text!";

改變 CSS 樣式

document.getElementById("p2").style.color="blue";

追加子元素的方法

首先必須創(chuàng)建該元素(元素節(jié)點(diǎn)),然后把它追加到已有的元素上。var para=document.createElement("p");

創(chuàng)建新的 HTML 元素 - appendChild() 在父元素的最后追加

創(chuàng)建新的 HTML 元素-element.insertBefore(para,child);在指定位置給父級(jí)追加子元素

刪除 HTML 元素,您必須清楚該元素的父元素:parent.removeChild(child);

替換 HTML 元素:parent.replaceChild(para,child); 方法

varelement=document.getElementById("d1");

varpara=document.createElement("p");

varnode=document.createTextNode("This is new.");

para.appendChild(node);

element.appendChild(para);

6.DOM - 事件

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

onclick 事件——當(dāng)用戶點(diǎn)擊時(shí)

onload 事件——用戶進(jìn)入

onunload 事件——用戶離開

onmouseover事件——鼠標(biāo)移入

onmouseout事件——鼠標(biāo)移出

onmousedown事件——鼠標(biāo)按下

onmouseup 事件——鼠標(biāo)抬起

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容