DOM:獨立於平臺和語言的標準、規範、接口。（主要作用：動態改變節點）
W3C DOM
- 核心 DOM:針對任何結構化文檔的標準模型
- XML DOM:針對 XML 文檔的標準模型
- HTML DOM:針對 HTML 文檔的標準模型
節點
- 文檔節點：整個文檔
- 元素節點：HTML元素
- 文本節點：元素內的文本
- 屬性節點：元素的屬性
- 註釋節點：註釋
節點屬性
parentNode
說明：得到父節點childNodes
說明：得到所有的子節點attributes
說明：得到所有的屬性節點
節點方法
createElement(“p”)
說明：創建一個元素節點p,就是標籤對createTextNode()
說明：創建一個文本節點，就是文本內容a.appendChild(b)
說明：把b添加到a的末尾a.insertBefore(b,c)
說明：把b添加到a中c的前面a.removeChild(b)
說明：刪除a中的ba.replace(b,c)
說明：把a中的c替換成b
實例
創建節點
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>創建節點</title>
<script type="text/javascript">
window.onload = function(){/*加載完成再執行本段代碼*/
var p = document.createElement("p");/*創建元素節點*/
var c = document.createTextNode("創建的第一個節點");/*創建文本節點*/
p.appendChild(c);/*將文本節點添加到元素節點中去*/
document.body.appendChild(p);/*把創建的那個元素節點添加到body中去*/
}
</script>
</head>
<body>
</body>
</html>插入節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入節點</title>
<style type="text/css">
#element {width:200px;}
</style>
<script type="text/javascript">
function addList(){
/*創建用戶要求的節點並且添加內容*/
var sign = document.getElementById("sign").value;/*獲取id=sign的文本框的內容*/
var signNode = document.createElement(sign);
var content = document.getElementById("content").value;/*獲取id=content的文本框的內容*/
var contentNode = document.createTextNode(content);
signNode.appendChild(contentNode);
/*插入*/
var element = document.getElementById("element").value;/*獲取id=element的文本框的內容*/
var list = document.getElementById("list");/*獲取id=list的元素*/
if("" != element){/*添加到指定位置*/
var listChildren = list.childNodes;
for(i in listChildren){
if(element == listChildren[i].innerHTML){
list.insertBefore(signNode,listChildren[i]);
return;/*跳出函數，中斷執行*/
}
}
}
list.appendChild(signNode);/*若是沒有找到指定的位置，添加在末尾*/
}
</script>
</head>
<body>
<div>
<ol id="list">
<li>java</li>
<li>ios</li>
<li>web</li>
</ol>
</div>
<hr/>
<div>
<input placeholder="請輸入標籤類型" value="" id="sign"></input><br/><br/>
<input placeholder="請輸入文本內容" value="" id="content"></input><br/><br/>
<input placeholder="選擇添加的位置,默認添加在末尾" value="" id="element"></input><br/><br/>
<input type="button" value="添加" onclick="addList();"></input>
</div>
</body>
</html>替換節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>替換節點</title>
<script type="text/javascript">
function replaceNode(){
var p = document.getElementById("p_2");
/*創建一個新的節點*/
var newNode = document.createElement("lable");
var newContent = document.createTextNode("新的一段");
newNode.appendChild(newContent);
var d = document.getElementById("content");
d.replaceChild(newNode,p);/*替換*/
}
</script>
</head>
<body>
<div id="content">
<p>第一段</p>
<p id="p_2">第二段</p>
<p>第三段</p>
</div>
<div>
<input type="button" value="替換第二段" onclick="replaceNode();"></input>
</div>
</body>
</html>刪除節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刪除節點</title>
<script type="text/javascript">
function replaceNode(){
var p = document.getElementById("p_2");
var d = document.getElementById("content");
d.removeChild(p);/*刪除*/
}
</script>
</head>
<body>
<div id="content">
<p>第一段</p>
<p id="p_2">第二段</p>
<p>第三段</p>
</div>
<div>
<input type="button" value="刪除第二段" onclick="replaceNode();"></input>
</div>
</body>
</html>
