DOM簡介
DOM是W3C（萬維網聯盟）的標准 "W3C文檔對象模型DOM是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構、樣式".W3C DOM標准分為3個不同部分
HTML DOM 定義了所有HTML元素的對象和屬性，以及訪問它們的方法
HTML DOM 節點
DOM 節點 HTML文檔中所有內容都是節點：
整個文檔是一個文檔節點 |
每個HTML元素是元素節點 |
HTML元素內的文本是文本節點 |
每個HTML屬性是屬性節點 |
注釋是注釋節點 |
HTML DOM Tree 節點樹
樹中所有節點均可以通過JS訪問，修改。
節點父、子、同胞
節點樹中節點間彼此擁有層級關系
Parent，child，sibling
警告！
DOM處理中常見錯誤是希望元素節點包含文本
<title>DOM學習</title> 元素節點是<title>，包含值"DOM學習"的文本節點
可以通過innerHTML屬性來訪問文本節點的值
HTML DOM 方法
編程接口
可以通過javascript（以及其他編程語言）對HTML DOM進行訪問
所有HTML元素被定義為對象，而編程接口則是對象方法和對象屬性
方法是可以執行的動作（添加/修改元素）
屬性是可以獲取或者設置的值(節點名稱/內容)
HTML DOM對象-方法-屬性
getElementById(id) |
獲取帶有執行id的節點（元素） |
getElementsByTagName(tag) |
獲取所有指定標簽的節點，p標簽等 |
getElementsByClassName（class） |
獲取所有指定類型的節點 |
createElement(ele) |
創建新標簽元素 |
createTextNode（txt） |
創建文本節點 |
insertBefore(newNode，node) |
在node節點之后插入newNode |
appendChild(node) |
插入新節點（元素），作為父節點的最后一個子節點 |
replaceNode(newNode,oldNode) |
替換舊元素 |
removeChild(node) |
刪除子節點（元素） |
innerHTML |
節點（元素）的文本值 |
parentNode |
節點（元素）的父節點 |
childNodes |
節點（元素）的子節點 |
attributes |
節點（元素）的屬性節點 |
HTML DOM屬性
innerHTML屬性 獲取元素內容
nodeName屬性規定節點名稱
nodeName屬性是只讀屬性 |
元素節點的nodeName與標簽名稱相同 |
屬性節點的nodeName與屬性名稱相同 |
文本節點的nodeName始終是#text |
文檔節點的nodeName始終是#document |
nodeName始終包含HTML元素的大寫字母標簽名稱 |
nodeValue屬性規定節點值
元素節點的nodeValue是undefined或null |
文本節點的nodeValue是文本本身 |
屬性節點的nodeValue是屬性值 |
nodeType屬性返回節點類型，只讀屬性
元素類型 |
nodeType |
元素 |
1 |
屬性 |
2 |
文本 |
3 |
注釋 |
8 |
文檔 |
9 |
舉例
<!doctype html><html><!--<head><meta charset="utf-8"><title>Dom事件</title></head>--><body><p id="myid1" style="color:blue">我的文檔內容1</p><p id="myid2" style="color:blue">我的文檔內容2</p><script type="text/javascript">var node=document.getElementById("myid1"); //通過id號獲取元素節點document.write(node.innerHTML+"<br>"); //輸出元素節點的文本內容node.innerHTML="更新文檔內容 via innerHTML"; //更新元素節點的文本內容document.getElementById("myid2").firstChild.nodeValue="更新文檔內容via nodeValue";//更新元素節點的文本內容document.write(node.nodeName+"\t"+node.nodeValue+"<br>");document.write(node.firstChild.nodeName+"\t"+node.firstChild.nodeValue+"<br>"); //輸出文本節點和值</script></body></html> |
HTML DOM訪問 查找HTML元素
getElementById（id） |
獲取指定id的元素 |
getElementsByTagName（tag） |
獲取帶有指定標簽名（p標簽，a標簽等）的所有元素 |
getElementsByClassName（class） |
獲取帶有相同類名的所有元素 |
HTML DOM修改
改變元素文本內容 parentNode.innerHTML node.nodeValue
改變CSS樣式 node.style
改變HTML屬性
創建新的HTML元素 createElement - createTextNode- appendChild
刪除已有的HTML元素 parentNode.removeChild (childNode) childNode.parentNode.removeChild(childNode)
改變事件（處理程序）
HTML DOM事件
用戶點擊鼠標 onclick
<input type="button" id="mybtn" value="提交" onclick="this.value='不提交'"/> //直接將javascript語句寫在事件處理中< input type="button" id="mybtn" value="提交" onclick="myFunction(this)"/>//通過js函數執行，注意實參直接是指定元素<script type="text/javascript">Function myFunction(ele){ //雖然實參是this，但是在寫函數時，不可以將形參命名為this，與關鍵字沖突ele.value="不提交";}</script> |
onload 事件可用於檢查訪客的瀏覽器類型和版本，以便基於這些信息來加載不同版本的網頁。
onload 和 onunload 事件可用於處理 cookies。
網頁已經加載 onload
離開網頁 onunload
圖片已經加載
鼠標移動到元素上 onmouseover
鼠標離開元素 onmouserout
<script type="text/javascript">function mOver(obj){obj.innerHTML="Thank you!";obj.style.width="300px";obj.style.marginTop="25px";}function mOut(obj){obj.innerHTML="Mouse Over Me!";obj.style.width="200px";obj.style.marginTop="0px";}</script><div onmouseover="mOver(this);" onmouseout="mOut(this);"style="background-color:#CCFFAA;width:200px;height:50px;padding-top:25px;text-align:center;">Mouse Over Me!</div> |
輸入字段改變 onchange
<script type="text/javascript">function myFunction(){var ele=document.getElementById("username");var inputstr=ele.value.trim();if(inputstr==null || ""==inputstr){alert("必須輸入字符串");}else {var regexp=/^[a-zA-Z]+$/;var result=inputstr.match(regexp);if(result==null){alert("不匹配");ele.value="";}elsealert("匹配成功");}}</script><p>請輸入用戶名<input type="text" id="username" onchange="myFunction();"></p> |
HTML表單提交 onsubmit
用戶出發按鍵 onkeydown
HTML DOM導航
使用節點關系在節點數中導航
getElementsByTagName（tag）方法返回節點列表，節點列表是一個節點數組，可以通過下標訪問某個節點元素，下標號從0開始
導航節點關系：三個節點屬性 parentNode，firstChild，lastChild
DOM根節點：可以訪問全部文檔 document.documentElement –全部文檔
Document.body ---文檔主題
childNodes屬性和nodeValue屬性