<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<mce:script type="text/javascript"><!--
function test() {
//访问<html/>元素
var oHtml = document.documentElement;
//访问<head/>元素
var oHead = oHtml.firstChild;
/* 也可以用下面方法
var oHead = oHtml.childNodes[0];
var oHead = oHtml.childNodes.item(0);
*/
//访问<body/>元素
var oBody = oHtml.lastChild;
/* 也可以用下面方法
var oBody = oHtml.childNodes[1];
var oBody = oHtml.childNodes.item(1);
var oBody = document.body;
*/
//oHtml,oHead,oBody三者之类的关系
alert(oBody.parentNode == oHtml); //true
alert(oBody.previousSibling == oHead); //true
alert(oHead.nextSibling == oBody); //true
alert(oBody.ownerDocument == document); //true
//getElementsByTagName()返回一个包含所有的tagName特性等于某个指定值的元素的NodeList
var oDiv = document.getElementsByTagName("div");
alert(oDiv[0].tagName); //DIV
var oInput = oDiv[0].getElementsByTagName("input");
alert(oInput[0].tagName); //INPUT
//getElementsByName()获取所有name特性等于指定值的元素
var oRadios = document.getElementsByName("radColor");
for(var i=0;i<oRadios.length;i++) {
if(oRadios[i].checked == true)
alert(oRadios[i].value); //或者用alert(oRadios[i].getAttribute("value"));
}
//getElementById()返回id特性等于指定值的元素
var oDiv2 = document.getElementById("div2");
/*
创建节点，
结果：
<div id="div2"><p id="p1">段落文字</p></div>
*/
var oP = document.createElement("p");
oP.setAttribute("id", "p1");
var oText = document.createTextNode("段落文字");
oP.appendChild(oText);
oDiv2.appendChild(oP);
/*
replaceChild()替换节点，方法两个参数：被添加的节点和被替换的节点
结果：
<div id="div2">
<p id="p2">段落文字(替换节点)</p>
</div>
*/
var oNewP = document.createElement("p");
oNewP.setAttribute("id","p2");
var oNewText = document.createTextNode("段落文字(替换节点)");
oNewP.appendChild(oNewText);
var p1 = document.getElementById("p1");
p1.parentNode.replaceChild(oNewP, p1);
/*
insertBefore()在某节点前插入节点，方法两个参数，要添加的节点和插在哪个节点前
结果：
<p id="p3">段落文字(在某节点前插入节点)</p>
<div id="div2">
<p id="p2">段落文字(替换节点)</p>
</div>
*/
var oBeforeP = document.createElement("P");
oBeforeP.setAttribute("id","p3");
var oBeforeText = document.createTextNode("段落文字(在某节点前插入节点)");
oBeforeP.appendChild(oBeforeText);
document.body.insertBefore(oBeforeP,oDiv2);
/*
removeChild()删除节点，最好用parentNode来确保每次都能访问到真正的父节点
结果：
<div id="div2">
<p id="p2">段落文字(替换节点)</p>
</div>
*/
var p3 = document.getElementById("p3");
p3.parentNode.removeChild(p3);
/*
createDocumentFragment()创建文档碎片，当添加大量节点时，可以把所有新节点附加其上，然后把文档碎
片的内容一次性添加到document中，提高性能
结果：
<div id="div2">
<p id="p2">段落文字(替换节点)</p>
</div>
<p>一</p><p>二</p><p>三</p><p>四</p><p>五</p><p>六</p><p>七</p><p>八</p><p>九</p><p>十</p>
*/
var oFragment = document.createDocumentFragment();
var arrText = ["一","二","三","四","五","六","七","八","九","十"]
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);
}
// --></mce:script>
</head>
<body>
<div id="div1">
<input type="radio" name="radColor" value="red" /> 红色<br />
<input type="radio" name="radColor" value="green" checked /> 绿色<br />
<input type="radio" name="radColor" value="blue" /> 蓝色<br />
<input type="button" onclick="test()" value="确定"/>
</div>
<div id="div2">
</div>
</body>
</html>
