DOM文檔對象模型簡介
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="";
}
else
alert("匹配成功");
}
}
</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屬性
DOM文檔對象模型簡介