<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <title>dom_节点练习</title> <style type="text/css"> div{ border:#008ff0 solid 2px; width:100px; height:50px; padding:5px; margin:10px; } #div_1{background-color:blue;} #div_2{background-color:red;} #div_3{background-color:green;} #div_4{background-color:orange;} </style> </head> <body> <h1>dom_节点练习</h1> <script type="text/javascript" src="a.js"> </script> <input type="button" value="创建并添加文本节点1" onclick="dom_demo_1()"/> <input type="button" value="创建并添加按钮节点1" onclick="dom_demo_2()"/> <input type="button" value="innerhtml方式添加节点1" onclick="dom_demo_3()"/> <input type="button" value="删除节点1" onclick="dom_demo_4()"/> <input type="button" value="删除节点2" onclick="dom_demo_5()"/> <input type="button" value="替换节点1" onclick="dom_demo_6()"/> <input type="button" value="替换节点2" onclick="dom_demo_7()"/> <input type="button" value="克隆替换节点" onclick="dom_demo_8()"/> <script type="text/javascript"> /* * firstnode=childnodes[0]; * lastnode=childnodes[childnodes.length-1]; */ function dom_demo_8(){ /* * 需求：用div3替换div1： * div中的方法3：用克隆的副本替换节点 * clonenode(boolean) 从文档层次中复制对对象的引用。 * boolean:代表是否克隆子节点，默认是否false * 具体过程是：先将div3复制后，再用副本替换div1的位置 */ var odiv_3=document.getelementbyid("div_3"); // var ocopydiv_3=odiv_3.clonenode(false);//默认是false,不克隆子节点 var ocopydiv_3=odiv_3.clonenode(true);// var odiv_1=document.getelementbyid("div_1"); odiv_1.parentnode.replacechild(ocopydiv_3,odiv_1); } function dom_demo_7(){ /* * 需求：用div3替换div1： * div中的方法2：（建议使用） * replacechild 用新的子元素替换已有的子元素。 * 父node.replacenode(new子,old子);注意顺序 * 返回old子 * 同样是：直接将div3剪切后，替换到了div1的位置上 */ var odiv_1=document.getelementbyid("div_1"); var odiv_3=document.getelementbyid("div_3"); odiv_1.parentnode.replacechild(odiv_3,odiv_1); } function dom_demo_6(){ /* * 需求：用div3替换div1： * div中的方法1：（不建议使用） * replacenode 用其它元素替换对象。 * old.replacenode(new); * odiv_1.replacenode(odiv_3); * 直接将div3剪切后，替换到了div1的位置上 */ var odiv_1=document.getelementbyid("div_1"); var odiv_3=document.getelementbyid("div_3"); odiv_1.replacenode(odiv_3); } function dom_demo_5(){ /* * 删除节点方式2：经常使用！ * div中的方法：removechild 从元素上删除子结点。 */ var odiv_1=document.getelementbyid("div_1"); odiv_1.parentnode.removechild(odiv_1); } function dom_demo_4(){ /* * 删除节点方式1：（自 杀方式）较少使用！ * div中的方法：removenode(boolean) * 从文档层次中删除对象。 * boolean代表是否删除子节点，默认是false */ var odiv_1=document.getelementbyid("div_1"); //odiv_1.removenode(false);//默认false，不删除子节点 odiv_1.removenode(true);//true代表删除子节点 } function dom_demo_3(){ /* *设置innerhtml方式添加节点： */ var odiv_1=document.getelementbyid("div_1"); //odiv_1.innerhtml="我是innerhtml属性"; odiv_1.innerhtml="<input type='button' value='按钮' />"; //强烈注意：双引号里面只能单引号，不能再使用双引号 } function dom_demo_2(){ /* * 创建并添加按钮节点： * 1，创建按钮节点,设置type * 2，获得div节点 * 3，使用appendchild方法 */ var obuttonnode=document.createelement("input"); obuttonnode.type="button"; obuttonnode.value="我是一个按钮"; var odiv_1=document.getelementbyid("div_1"); odiv_1.appendchild(obuttonnode); } function dom_demo_1(){ /* * 创建并添加节点的第1种方式： * 1，createtextnode创建文本节点 * 2，获得div节点 * 3，使用appendchild方法 */ var otextnode=document.createtextnode("这个是文字"); var odiv_1=document.getelementbyid("div_1"); odiv_1.appendchild(otextnode); } </script> <div id="div_1">div区域。1</div> <div id="div_2">div区域。2</div> <div id="div_3">div区域。3</div> <div id="div_4">div区域。4</div> </body> </html>
以上就是javascript_9_dom_节点练习的内容。