一·根據 W3C 的 HTML DOM 標准，HTML 文檔中的所有內容都是節點(NODE)：
整個文檔是一個文檔節點(document對象)
每個 HTML 元素是元素節點(element 對象)
HTML 元素內的文本是文本節點(text對象)
每個 HTML 屬性是屬性節點(attribute對象)
注釋是注釋節點(comment對象)
二·DOM節點屬性
(自身)屬性:
attributes - 節點（元素）的屬性節點
nodeType – 節點類型
nodeValue – 節點值
nodeName – 節點名稱
innerHTML - 節點（元素）的文本值
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="div1"> <p name="littleP" class="p1">hello p</p> </div> <script> var ele=document.getElementsByClassName("p1")[0]; console.log(ele) console.log(ele.nodeName);//獲取節點名稱 console.log(ele.nodeType);//獲取節點類型 console.log(ele.nodeValue);//獲取節點值 console.log(ele.innerHTML);//獲取節點文本 ele.innerHTML="hello world"//更改節點文本 </script> </body> </html>
導航屬性:
parentNode - 節點（元素）的父節點 (推薦)
firstChild – 節點下第一個子元素
lastChild – 節點下最后一個子元素
childNodes - 節點（元素）的子節點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="div1"> <p name="littleP" class="p1">hello p</p> <div>divdiv</div> </div> <script> var ele=document.getElementsByClassName("p1")[0]; var p_ele=ele.parentNode;//獲取節點對象的父節點 console.log(p_ele.nodeName) var b_ele=ele.nextSibling;//獲取節點對象的同胞節點（不推薦使用，會取出換行符） console.log(b_ele.nodeName); var b_ele2=ele.nextElementSibling;//獲取節點對象的同胞節點（推薦使用） console.log(b_ele2.nodeName) </script> </body> </html>
三·訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素：
頁面查找：
通過使用 getElementById() 方法
通過使用 getElementsByTagName() 方法
通過使用 getElementsByClassName() 方法
通過使用 getElementsByName() 方法
四·HTML DOM Event(事件)
HTML 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。
下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素獲得焦點。 //練習：輸入框
onblur 元素失去焦點。
onchange 域的內容被改變。
onkeydown 某個鍵盤按鍵被按下。
onkeypress 某個鍵盤按鍵被按下並松開。
onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。(只給 body元素加)
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開
onselect 文本被選中。
onsubmit 確認按鈕被點擊。(只能給form元素使用)
為節點（元素）附加事件屬性的兩種方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="alert(123)">點我</div> <p id="abc">試一試!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ alert("hi"); }; </script> </body> </html>
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.