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实现一部分)