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 表單被提交時
-
當用戶觸發按鍵時
比如：
在本例中，當用戶點擊文本時，會觸發事件改變文本。
<script> function changetext(id){id.innerHTML="Ooops!"; } </script> </head> <body><h1 onclick="changetext(this)">點擊文本!</h1>注意：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自定义校