<!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" οnclick="test()" value="确定"/> </div> <div id="div2"> </div> </body> </html>