Javascript_9_DOM_节点练习
程序员文章站
2022-05-05 10:33:57
...
Javascript_9_DOM_节点练习
<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_节点练习的内容,更多相关内容请关注PHP中文网(www.php.cn)!
下一篇: MySQL内部临时表策略