通过节点的层次关系获取节点对象 关系： 1，父节点：parentNode:对应一个节点对象 2，子节点：childNodes：对应一个节点集合 3，兄弟节点 上一个兄弟节点：previouesSibling 下一个兄弟节点：nextSibling
* 除了求父节点，其他节点均要判断nodes[i] instanceof Element，否则会输出空白文本节点#text* 获取子父，用document对象中的方法，在下面的div演示中，除了层次关系，都用的是div中的方法 * 一、获取层次节点*
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <script type="text/javascript"> function getNodeByLevel1() { //获取页面中的表格节点 var tabNode=document.getElementById("tabid"); //获取父节点，parentNode var node=tabNode.parentNode; //alert(node.nodeName);//body //获取子节点 /* var nodes=tabNode.childNodes; //alert(nodes.length); for(var i=0;i<nodes.length;i++) { if(nodes[i] instanceof Element)//在现在的浏览器解析中，会将回车符也作为一个节点，nodes[i] instanceof Text，则输出#text alert(nodes[i].nodeName); } */ //获取上一个兄弟节点 /* var nodebro=tabNode.previousSibling; if(nodebro instanceof Text) alert(nodebro.previousSibling.nodeName);//div else alert(nodebro.nodeName); */ //获取下一个兄弟节点 var nodebro=tabNode.nextSibling; if(nodebro instanceof Text) alert(nodebro.nextSibling.nodeName);//dl else alert(nodebro.nodeName); } </script> <input type="button" value="通过节点层次获取节点" onclick="getNodeByLevel1()"/> <div>div区域</div> <table id="tabid"> <tr> <td>单元格1</td> <td>单元格2</td> </tr> </table> <dl> <dt>上层项目</dt> <dt>下层项目</dt> </dl> <a href="">一个超链接</a> </body> </html>二、在层次上添加节点：添加文本、按钮或者用innerHTML添加标签
<style type="text/css"> div{ border:#30F 1px solid; width:200px; padding:30px;/*内边距文字边界距离*/ margin:10px;/*外边距，即不同的div之间的距离*/ } div#div_1/*id选择器，*/ { background-color:#93F; } </style> </head> <body> <script type="text/javascript"> //创建并添加节点 //需求：在div_1节点中添加一个文本节点 function crtAndAdd() { //1,创建节点，使用document中的createTextNode方法 var oTextNode=document.createTextNode("创建一个新文本节点"); //2,获取div_1节点 var oDivNode=document.getElementById("div_1"); //3，将文本节点添加到div_1中,用div中的appendChild方法 oDivNode.appendChild(oTextNode); } function crtAndAdd2() { //需求：在div_1中创建并添加一个按钮节点 //创建一个按钮节点，用document中的createElement元素 //1，创建一个按钮节点,要先创建input标签节点，再添加属性为按钮 var oButNode=document.createElement("input"); oButNode.type="button"; oButNode.value="一个新按钮"; //2，获取div_1节点 var oDivNode=document.getElementById("div_1"); //3,将按钮添加到div_1节点中，用div中的appendChild方法 oDivNode.appendChild(oButNode); } //通过另一种方式添加到div_1中 function crtAndAdd3() { //使用容器型标签中的一个属性：innerHTML，这个属性可以设置html文本 //1,获取div_1节点 var oDivNode=document.getElementById("div_1"); oDivNode.innerHTML="<input type='button' value='有个按钮'/>"; //oDivNode.innerHTML="<a href='http://www.sina.com.cn'>有个超链接</a>"; } </script> <input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/> <hr/> <div id="div_1"> </div>三、删除节点
<style type="text/css"> div{ border:#30F 1px solid; width:200px; padding:30px;/*内边距文字边界距离*/ margin:10px;/*外边距，即不同的div之间的距离*/ } div#div_2 { background-color:#9F3; } </style> </head> <body> function delNode() { //需求：删除div_2节点, //1，获取节点 var oDivNode=document.getElementById("div_2"); //用div中的removeNode方法，删除节点 oDivNode.removeNode(true);//传true，能够删除子之后的所有元素，较少用 //一般用removeChild方法,删除子节点 //获取div_2的父节点，然后再用父节点的removeChild将div_2删除 oDivNode.parentNode.removeChild(oDivNode); } </script> <input type="button" value="删除节点" onclick="delNode()"/> <hr/> <div id="div_2"> 好好学习，天天向上！ </div> </body> </html>四、替换和克隆节点
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{ border:#30F 1px solid; width:200px; padding:30px;/*内边距文字边界距离*/ margin:10px;/*外边距，即不同的div之间的距离*/ } div#div_1/*id选择器，*/ { background-color:#93F; } div#div_3 { background-color:#630; } </style> </head> <body> <script type="text/javascript"> //用div_3节点替换div_1节点 function updateNode() { /*获取div_1,div_3 * 使用replaceNode进行替换 */ var oDivNode_1=document.getElementById("div_1"); var oDivNode_3=document.getElementById("div_3"); oDivNode_1.replaceNode(oDivNode_3);//用div_3替换div_1 //但不建议用replaceNode方法，建议用replaceChild方法 //1，获取div_1的父节点 var oDivNode=document.getElementById(oDivNode_1); //2，用replaceChild方法进行替换 oDivNode.parentNode.replaceChild(oDivNode_3,oDivNode_1);//div_3的原位置删除 } function updateNode() { //克隆div_3 var oDivNode=document.getElementById("div_3"); var oDivNodeNew=oDivNode.cloneNode(true); var oDivNode_1=document.getElementById("div_1"); oDivNode_1.parentNode.replaceChild(oDivNodeNew,oDivNode_1); } </script> <input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/> <input type="button" value="删除节点" onclick="delNode()"/> <input type="button" value="修改节点" onclick="updateNode()"/> <input type="button" value="克隆节点" onclick="updateNode2()"/> <hr/> <div id="div_1"> </div> <div id="div_2"> 好好学习，天天向上！ </div> <div id="div_3"> div区域演示文字 </div> <div id="div_4"> 节点的增删改查 </div> </body> </html>