當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript之DOM总结

發布時間：2025/3/20 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript之DOM总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.簡介

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹，這種結構被稱為節點樹：

節點樹中的節點彼此擁有層級關系。我們常用父（parent）、子（child）和同胞（sibling）等術語來描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱為根（root）。
每個節點都有父節點、除了根（它沒有父節點）。
一個節點可擁有任意數量的子節點。
同胞是擁有相同父節點的節點。

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

2.方法和屬性

HTML DOM 方法是我們可以在節點（HTML 元素）上執行的動作。

HTML DOM 屬性是我們可以在節點（HTML 元素）設置和修改的值。

一些常用的 HTML DOM 方法：

getElementById(id) - 獲取帶有指定 id 的節點（元素）
appendChild(node) - 插入新的子節點（元素）
removeChild(node) - 刪除子節點（元素）

一些常用的 HTML DOM 屬性：

innerHTML - 節點（元素）的文本值
parentNode - 節點（元素）的父節點
childNodes - 節點（元素）的子節點
attributes - 節點（元素）的屬性節點

下面是一些常用方法：

方法描述

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

3.DOM 集合(Collection)

getElementsByTagName() 方法返回 HTMLCollection 對象。

HTMLCollection 對象類似包含 HTML 元素的一個數組。

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

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

HTMLCollection 對象的 length 屬性定義了集合中元素的數量。

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

實例：修改所有 <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 內容
改變 CSS 樣式
改變 HTML 屬性
創建新的 HTML 元素
刪除已有的 HTML 元素
改變事件（處理程序）

創建 HTML 內容

改變元素內容的最簡單的方法是使用 innerHTML 屬性。

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

改變 HTML 樣式

通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象。

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

創建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必須創建該元素（元素節點），然后把它追加到已有的元素上。

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

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

刪除已有的 HTML 元素

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

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

替換 HTML 元素

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

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

事件

HTML DOM 允許 JavaScript 對 HTML 事件作出反應。

HTML 事件的例子：

當用戶點擊鼠標時
當網頁已加載時
當圖片已加載時
當鼠標移動到元素上時
當輸入字段被改變時
當 HTML 表單被提交時
當用戶觸發按鍵時

比如：

在本例中，當用戶點擊文本時，會觸發事件改變文本。

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

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

5.事件匯總

下面總結一些常用的事件。

鼠標事件

屬性描述

onclick	當用戶點擊某個對象時調用的事件句柄。
oncontextmenu	在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick	當用戶雙擊某個對象時調用的事件句柄。
onmousedown	鼠標按鈕被按下。
onmouseenter	當鼠標指針移動到元素上時觸發。
onmouseleave	當鼠標指針移出元素時觸發
onmousemove	鼠標被移動。
onmouseover	鼠標移到某元素之上。
onmouseout	鼠標從某元素移開。
onmouseup	鼠標按鍵被松開。

鍵盤事件

屬性描述

onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按下并松開。
onkeyup	某個鍵盤按鍵被松開。

表單事件

屬性描述

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

剪貼板事件

屬性描述

oncopy	該事件在用戶拷貝元素內容時觸發
oncut	該事件在用戶剪切元素內容時觸發
onpaste	該事件在用戶粘貼元素內容時觸發

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

總結

以上是生活随笔為你收集整理的javascript之DOM总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS布局相关汇总
下一篇： Spring 使用 JSR303自定义校