DOM技術
DOM Level1:對文檔節點進行訪問以及增，刪，改
Node接口定義了一些所有節點類型都包含的特性和方法
1.訪問相關節點
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting!</p>
<p>You're learning to use the DOM!</p>
</body>
</html>
訪問<html/>元素：
var oHtml = document.documentElement;
取得<head/>元素:
var oHead = oHtml.firstChild; /
var oHead = oHtml.childNodes[0]; /
var oHead = oHtml.childNodes.item(0);
取得<body/>元素:
var oBody = document.body;
var oBody = oHtml.lastChild; /
var oBody = oHtml.childNodes[1]; /
var oBody = oHtml.childNodes.item(1);
取得子節點數量:
var length = oHead.childNodes.length;
確定<html/> <head/> <body/>之間的關系:
alert(oHead.parentNode == oHtml); //outputs "true"
alert(oBody.parentNode == oHtml); //outputs "true"
alert(oHead.nextSubling == oBody); //outputs "true"
alert(oBody.previousSubling == oHead); //outputs "true"
alert(oHead.ownerDocument == document); //outputs "true"
2.處理特性
<p style="color:red" id="p1">Hello world!</p>
獲取id特性值:
var oP = document.getElementById("p1");
var sId = oP.getAttribute("id"); 或
var sId = oP.attributes.getNamedItem("id").nodeValue; 或
var sId = oP.attributes.item(1).nodeValue;
設置id特性值：
var oP = document.getElementById("p1");
oP.setAttribute("id") = "newId";
oP.attributes.getNamedItem("id").nodeValue = "newId";
oP.attributes.item(1).nodeValue = "newId";
3.訪問指定節點
3.1）XML DOM的getElementByTagName();
獲取文檔中第3個img元素:
var oImgs = document.getElementByTagName("img");
var oneImg = oImgs[2];或
var oneImg = oImgs.item(2);
獲取頁面第一段落的所有圖像:
var oP = document.getElementByTagName("p").item(0);
var oImgs = oP.getElementByTagName("img");
3.2）HTML DOM的getElementByName();
<html>
<head>DOM Example</head>
<body>
<form method="post" action="dosomething.cgi">
<fieldset>
<legend>What color do you like?</legend>
<input type="radio" name="radColor" value="red"/>Red<br/>
<input type="radio" name="radColor" value="Green"/>Green<br/>
<input type="radio" name="radColor" value="Blue"/>Blue<br/>
</fieldset>
</form>
</body>
</html>
獲得所有單選按鈕的引用:var oRadios = document.getElementByName("radColor");
獲得單個單選按鈕的顏色:alert(oRadios[0].getArrribute("value")); //outputs "Red"
3.3）HTML DOM的getElementById()
<html>
<head>DOM Example</head>
<body>
<p>Hello World!</p>
<div id="div1">This is my first layer</div>
</body>
</html>
訪問id為"div1"的</div>元素:
HTML DOM
var oDiv1 = document.getElementById("div1"); /
XML DOM
var oDivs = document.getElementByTagName("div");
var oDiv1 = null;
for(int i=0; i<oDivs.length; i++){
if(oDivs[i].getAttribute("id") == "div1"){
oDiv1 = oDivs[i];
break;
}
}
4創建和操作節點
假設有如下頁面:
<html>
<head>
<title>createElement() Example</title>
</head>
<body>
</body>
</html>
4.1）createElement()、createTextNode()、appendChild()
使用DOM添加<p>Hello World!</p>到這個頁面中:
<html>
<head>
<title>createElement() Example</title>
<script type="text/javascript">
function createMessage(){
var oP = document.createElement("p");
var oText = document.createTextNode("Hello World!");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createMessage()">
</body>
</html>
4.2）removeChild()
假設已有一個包含Hello World!消息的頁面.
移除消息:
<html>
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage(){
var oPs = document.getElementByTagName("p");
var oP = oPs[0];
oP.parentNode.removeChild(oP)
}
</script>
</head>
<body onload="removeMessage()">
<p>Hello World!</p>
</body>
</html>
4.3）replaceChild()
假設已有一個包含Hello World!消息的頁面.
用<p>Hello Universe!</p>替換消息:
<html>
<head>
<title>replaceChild() Example</title>
<script type="text/javascript">
function replaceMessage(){
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.getElementByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP,oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>Hello World!</p>
</body>
</html>
4.4）insertBefore()
假設已有一個包含Hello World!消息的頁面.
讓<p>Hello Universe!</p>出現在此消息之前:
<html>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function insertMessage(){
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.getElementByTagName("p")[0];
oOldP.parentNode.insertBefore(oNewP,oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>Hello World!</p>
</body>
</html>
4.5）createDocumentFragment()
一次刷屏代替多次刷屏
var arrText = ["first","second","third","fourth","fifth"];
var oFragment = document.createDocumentFragment();
for(var i=0;i<arrText.length;i++){
var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment.appendChild(oFragment));
這里對appendChild()的調用實際上并不是把文檔碎片節點本身追加到</body>元素中;而是僅僅追加碎片中的子節點。
調用document.body.appendChild()一次代替十次，這意味著只需要進行一次刷屏.
5 HTML DOM特征功能
5.1）讓特性像屬性一樣
<img src="mypicture.jpg" border="0"/>
使用XML DOM獲取和設置src和border特性，要用getAttribute()和setAttribute()方法:
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jsp")
oImg.setAttribute("border","1");
使用HTML DOM,可以使用同樣名稱的屬性來獲取和設置這些值:
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jsp";
oImg.border="1";
特性名和屬性名不一樣的特例:(因為class是個保留字)
<div class="header"></div>
alert(oDiv.className);
oDiv.className="footer";
注:IE在setAttribute()上有個很大的問題,當你使用它時,變更并不會總是正確地反應出來。
如果使用IE，最好盡可能用屬性
5.2）table方法
假設想使用DOM來創建如下HTML表格：
<table border="1" width="100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 1,2</td>
</tr>
<tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
通過XML DOM完成:
//create the table
var oTable = document.createElement("table");
oTable.setAttribute("border","1");
oTable.setAttribute("width","100%");
//create the tbody
var oTBody = document.createElement("tbody");
oTable.appendChild(oTBody);
//create the first row
var oTR1 = document.createElement("tr");
oTBody.appendChild(oTR1);
var oTD11 = document.createElement("td");
oTD11.appendChild(document.createTextNode("Cell 1,1"));
oTR1.appendChild(oTD11);
var oTD12 = document.createElement("td");
oTD12.appendChild(document.createTextNode("Cell 1,2"));
oTR1.appendChild(oTD12);
//create the second row
var oTR2 = document.createElement("tr");
oTBody.appendChild(oTR2);
var oTD21 = document.createElement("td");
oTD21.appendChild(document.createTextNode("Cell 2,1"));
oTR2.appendChild(oTD21);
var oTD22 = document.createElement("td");
oTD22.appendChild(document.createTextNode("Cell 2,2"));
oTR2.appendChild(oTD22);
//add the table to the document body
document.body.appendChild(oTable);
這段代碼十分冗長且有些難以理解。
為了協助建立表格，HTML DOM給<table/>、<tbody/>和</tr>添加了一些特性和方法
通過HTML DOM完成:
//create the table
var oTable = document.createElement("table");
oTable.border = "1";
oTable..width = "100%";
//create the body
var oTBdoy = document.createElement("tbody");
oTable.appendChild(oTBody);
//create the first row
oTBody.inserRow(0);
oTBody.rows[0].inserCell(0);
oTBody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
oTBody.rows[0].inserCell(1);
oTBody.rows[0].cells[1].appendChild(document.createTextNode("Cell 1,2"));
//create the second row
oTBody.inserRow(1);
oTBody.rows[1].inserCell(0);
oTBody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2,1"));
oTBody.rows[1].inserCell(1);
oTBody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//add the table to the document body
document.body.appendChild(oTable);
雖然從技術角度來說，兩種代碼都是正確的，
但是使用這些特性和方法來創建表格使得代碼變得更加有邏輯且更加易讀
DOM Level2 遍歷DOM樹(Mozilla才有)
DOM Level3 瀏覽器未實現(Mozilla實現一部分)