首页 > 代码库 > JavaScript(DOM编程二)
JavaScript(DOM编程二)
文档加载完毕之后，在Window.onload方法中创建元素节点，添加到DOM文档中
代码演示：
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ alert("运行前。。。。。") //创建一个元素节点 参数是元素节点的名称 li <li></li> var linode=document.createElement("li"); //创建一个文本节点 参数即为文本节点中的字符串 厦门 var textnode=document.createTextNode("厦门"); //把该文本节点加入到元素节点中 <li>厦门<li> linode.appendChild(textnode); //把linode加入到首尔的后面： var city=document.getElementById("city"); city.appendChild(linode); alert("运行后。。。。。"); } </script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li></ul><br><br>gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atguigu"/></body></html>
运行效果：
单击确定
----------------------------------------------
判断某个节点是否存在某个属性
<script type="text/javascript"> window.onload=function(){ var v1=document.getElementById("bj");//获得li为北京的元素节点 var v2=document.getElementsByTagName("li")[1];//获得li为上海的元素节点； //判断这两个节点是否存在id属性 if(v1.id){ alert("v1节点存在id属性"); }else{ alert("v1节点不存在id属性"); } if(v2.id){ alert("v2节点存在id属性"); }else{ alert("v2节点不存在id属性"); } } </script>
程序运行结果：
-------------------------------------------------------
实验一：
需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
页面效果：
基本代码：
<p>你喜欢哪个城市?</p><ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li></ul><br><br><form action="text5.html" name="myform"> <input type="radio" name="type" value="http://www.mamicode.com/city">城市 <input type="radio" name="type" value="http://www.mamicode.com/game">游戏 name: <input type="text" name="name"/> <input type="submit" value="http://www.mamicode.com/Submit" id="submit"/></form>
思路过程：
<script type="text/javascript"> //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 window.onload = function(){ //1. 获取 #submit 对应的按钮 submitBtn var submit = document.getElementById("submit"); //2. 为 submitBtn 添加 onclick 响应函数 submit.onclick = function(){ //4. 检查是否选择 type, 若没有选择给出提示: "请选择类型" //4.1 选择所有的 name="type" 的节点 types var types = document.getElementsByName("type"); //4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明 //有一个 type 被选中了: 通过 if(元素节点.属性名) 来判断某一个元素节点是否有 //该属性. var typeVal = null; for(var i = 0; i < types.length; i++){ if(types[i].checked){ typeVal = types[i].value; break; } } //4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束: //return false if(typeVal == null){ alert("请选择类型"); return false; } //5. 获取 name="name" 的文本值: 通过 value 属性: nameVal var nameEle = document.getElementsByName("name")[0]; var nameVal = nameEle.value; //6. 去除 nameVal 的前后空格. var reg = /^\s*|\s*$/g; nameVal = nameVal.replace(reg, ""); //使 name 的文本框也去除前后空格. nameEle.value = http://www.mamicode.com/nameVal;"" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容" //方法结束: return false if(nameVal == ""){ alert("请输入内容"); return false; } //7. 创建 li 节点 var liNode = document.createElement("li"); //8. 利用 nameVal 创建文本节点 var content = document.createTextNode(nameVal); //9. 把 8 加为 7 的子节点 liNode.appendChild(content); //10. 把 7 加为选择的 type 对应的 ul 的子节点 document.getElementById(typeVal) .appendChild(liNode); //3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的 //默认行为. return false; } } </script>具体实施：
1 <script type="text/javascript"> 2 window.onload=function(){ 3 //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; 4 // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; 5 //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 6 7 //一。先获取对应的按钮 8 var submit=document.getElementById("submit"); 9 //然后为他绑定onclick事件10 submit.onclick=function(){11 //获得单选节点 通过type属性获得12 var radionode=document.getElementsByName("type");13 //循环遍历 得到选择的某个按钮的value值14 var radionodetype =null;15 for(var i=0;i<radionode.length;i++){16 if(radionode[i].checked){//存在checked属性17 radionodetype=radionode[i].value;//获得选中的按钮的value值18 break;19 }20 }21 //判断是否 radionodetype的值仍然为空 为空则 说明用户没单击任何的按钮 弹窗提示 然后停止22 if(radionodetype==null){23 alert("请选择类型。。。。。。");24 return false;25 }26 27 //二。获得元素节点 是它的子节点是文本 通过name属性28 var textnode=document.getElementsByName("name")[0];29 // alert(textnode);30 //得到输入的文本内容31 var textcontext=textnode.value;32 // alert(textcontext);33 34 //正则表达式 去掉前后的空格35 var zheze=/^\s*|\s*$/g;36 textcontext=textcontext.replace(zheze,"");37 //使文本框中的内容也去掉前后空格 不然在下次输入的时候光标不是在文本框的开始位置(主要还是没有实现跳页 所以数据会一直到页面上 如果再次条到本页 那么上一次输入的数据将消失)38 textnode.value=textcontext;39 if(textcontext==""){40 alert("输入的内容不能为空 或者是空格");41 return false;42 }43 44 45 //创建元素节点，为之后的节点插入做准备46 var linode=document.createElement("li");47 //创建文本节点，48 var textnode=document.createTextNode(textcontext)//参数就是用户输入的值 去掉空格之后 不用担心内容为"" 如果为“” 那么代码根本执行不到这里49 //把该文本节点的内容设置进上面创建的元素节点中50 linode.appendChild(textnode);51 52 //根据选择的类型radionodetype的值 先得到相应的li节点集合53 var lilist=document.getElementById(radionodetype);54 //为集合添加一条元素节点<li><li>55 lilist.appendChild(linode);56 57 58 return false;//即使用户输入的内容都合法 也不让其跳页59 }60 }61 62 </script>
运行效果展示：
1.什么都不输入，单击提交
2.选择类型之后，文本中没有输入任何的内容，单击提交
3.选择类型，并且输入带空格的字符
提交之后
----------------------------------------------------------------
现在在上面代码的基础上，增加一个功能，就是单击相应的文本，弹出该文本的内容，刚刚添加的文本也要具有该项功能
需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
1 <script type="text/javascript"> 2 window.onload=function(){ 3 //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; 4 // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; 5 //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 6 7 //无论是否用户添加了新的节点，用户点击时都能产生单击事件 所以需求2的代码至少在文档加载完毕之后就应该执行 所以应该放在onload方法体中的最上边 8 function showtext(node){//这里边不需要确定参数的类型，因为JavaScript的参数类型是弱类型的 即函数参数不需要类型 9 alert(node.firstChild.nodeValue);10 }11 //1为每一个文本都定义单击事件12 var testonclick=document.getElementsByTagName("li");//得到所有的li节点 元素节点 想要得到本节点需要使用firstchild才可以13 //循环定义单击事件14 for(var i=0;i<testonclick.length;i++){15 testonclick[i].onclick= function () {16 showtext(this);17 }18 }19 20 //一。先获取对应的按钮21 var submit=document.getElementById("submit");22 //然后为他绑定onclick事件23 submit.onclick=function(){24 //获得单选节点 通过type属性获得25 var radionode=document.getElementsByName("type");26 //循环遍历 得到选择的某个按钮的value值27 var radionodetype =null;28 for(var i=0;i<radionode.length;i++){29 if(radionode[i].checked){//存在checked属性30 radionodetype=radionode[i].value;//获得选中的按钮的value值31 break;32 }33 }34 //判断是否 radionodetype的值仍然为空 为空则 说明用户没单击任何的按钮 弹窗提示 然后停止35 if(radionodetype==null){36 alert("请选择类型。。。。。。");37 return false;38 }39 40 //二。获得元素节点 是它的子节点是文本 通过name属性41 var textnode=document.getElementsByName("name")[0];42 // alert(textnode);43 //得到输入的文本内容44 var textcontext=textnode.value;45 // alert(textcontext);46 47 //正则表达式 去掉前后的空格48 var zheze=/^\s*|\s*$/g;49 textcontext=textcontext.replace(zheze,"");50 //使文本框中的内容也去掉前后空格 不然在下次输入的时候光标不是在文本框的开始位置(主要还是没有实现跳页 所以数据会一直到页面上 如果再次条到本页 那么上一次输入的数据将消失)51 textnode.value=textcontext;52 if(textcontext==""){53 alert("输入的内容不能为空 或者是空格");54 return false;55 }56 57 58 //创建元素节点，为之后的节点插入做准备59 var linode=document.createElement("li");60 //创建文本节点，61 var textnode=document.createTextNode(textcontext)//参数就是用户输入的值 去掉空格之后 不用担心内容为"" 如果为“” 那么代码根本执行不到这里62 //把该文本节点的内容设置进上面创建的元素节点中63 linode.appendChild(textnode);64 65 //根据选择的类型radionodetype的值 先得到相应的li节点集合66 var lilist=document.getElementById(radionodetype);67 //为集合添加一条元素节点<li><li>68 lilist.appendChild(linode);69 70 71 //2. 为新创建的 li 添加 onclick 响应函数72 linode.onclick = function(){73 showtext(this);74 }75 76 77 return false;//即使用户输入的内容都合法 也不让其跳页78 }79 }80 81 </script>
然后单击文本就能弹出单击的文本内容
-----------------------------------------------------
节点的替换(都需要得到父节点中，replaceChild（a,b），a和b都是元素节点，即替换时的文本所属的元素节点)
单向替换：
1 <script type="text/javascript"> 2 window.onload=function(){ 3 alert("1"); 4 //节点的单向替换 5 var bj=document.getElementById("bj");//得到元素节点 北京 6 var rl=document.getElementById("rl");//得到元素节点 红警 7 //得到父节点 8 var bjpaternal=document.getElementById("city");10 //使用replaceChild(a,b)方法完成节点的替换 参数a:表示将来使用哪个节点进行替换 参数b:表是被替换的目标节点11 bjpaternal.replaceChild(rl,bj);//调用北京父节点bjpaternal 的方法 将要把北京替换掉 所以 把北京替换为红警 并且红警这个节点也消失了 相当于把红警覆盖在了北京上12 //这是单向替换13 14 }15 </script>
运行结果：
点击确定：
双向替换(自己编写替换函数,使用到了克隆函数)：
1 <p>你喜欢哪个城市?</p> 2 <ul id="city"><li id="bj" name="BeiJing">北京</li> 3 <li>上海</li> 4 <li>东京</li> 5 <li>首尔</li> 6 </ul> 7 8 <br><br> 9 <p>你喜欢哪款单机游戏?</p>10 <ul id="game">11 <li id="rl">红警</li>12 <li>实况</li>13 <li>极品飞车</li>14 <li>魔兽</li>15 </ul>
1 <script type="text/javascript"> 2 window.onload=function(){ 3 4 //节点的双向替换 5 var bj=document.getElementById("bj");//得到元素节点 北京 6 var rl=document.getElementById("rl");//得到元素节点 红警 7 //得到各自的父节点 8 var bjpaternal=document.getElementById("city"); 9 var rlpaternal=document.getElementById("game");10 //克隆一个中间节点 这样做是因为 红警替换为北京的时候(北京覆盖红警)，确保北京不消失 因为下一步还要把北京替换为红警 所以使用克隆11 var tag=bj.cloneNode(true);//为true时 表示可以克隆12 //进行互换13 alert("把红警变换为北京");14 rlpaternal.replaceChild(tag,rl);//操作的是克隆的节点 保证北京在覆盖红警之后不消失15 alert("把北京变换为红警");16 bjpaternal.replaceChild(rl,bj);//把红警覆盖 变为北京17 }18 </script>
运行效果：
确定之后：红警被北京覆盖
确定之后：最初北京的地方 被红警覆盖 实现互换
程序的改进：把互换过程写成一个函数
1 <script type="text/javascript"> 2 window.onload=function(){ 3 4 // //节点的双向替换 5 // var bj=document.getElementById("bj");//得到元素节点 北京 6 // var rl=document.getElementById("rl");//得到元素节点 红警 7 // //得到父节点 8 // var bjpaternal=document.getElementById("city"); 9 // var rlpaternal=document.getElementById("game");10 // //克隆一个中间节点 这样做是因为 红警替换为北京的时候(北京覆盖红警)，确保北京不消失 因为下一步还要把北京替换为红警 所以使用克隆11 // var tag=bj.cloneNode(true);//为true时 表示可以克隆12 // //进行互换13 // alert("把红警变换为北京");14 // rlpaternal.replaceChild(tag,rl);//操作的是克隆的节点 保证北京在覆盖红警之后不消失15 // alert("把北京变换为红警");16 // bjpaternal.replaceChild(rl,bj);//把红警覆盖 变为北京17 18 19 var node1=document.getElementById("bj");//得到元素节点 北京20 var node2=document.getElementById("rl");//得到元素节点 红警21 change(node1,node2);22 23 }24 //定义一个上述的方法 完成互换 该函数放在onload方法体中也可以25 function change(node1,node2){26 27 //先得到各自的父节点 使用parentNode方法28 var parentnode1=node1.parentNode;29 var parentnode2=node2.parentNode;30 31 if(parentnode1 && parentnode2){//如果父节点都存在 那么才能进行互换操做32 //进行克隆33 var clone=node1.cloneNode(true);34 //进行互换操作35 alert("互换第一步：");36 //因为克隆了 node1 所以先把node2换为node1 参数使用克隆出的clone对象37 parentnode2.replaceChild(clone,node2);38 //在把node1覆盖 变为node239 alert("互换第二步：")40 parentnode1.replaceChild(node2,node1);41 }42 43 }44 </script>
---------------------------------------------------
使用循环把内容全部换位置
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //分别得到各自的li节点 9 var city=document.getElementById("city");10 var game=document.getElementById("game");11 var licity=city.getElementsByTagName("li");12 var ligame=game.getElementsByTagName("li");13 //使用循环进行互换14 for(var i=0;i<licity.length;i++){15 alert(i);16 changeshow(licity[i],ligame[i])17 }18 19 20 }21 //先定义一个互换的函数22 function changeshow(node1,node2){23 //找到各自对应的父节点24 var node1parent=node1.parentNode;25 var node2parent=node2.parentNode;26 //如果父节点存在 那么可以进行互换27 if(node1parent&&node2parent){28 //互换之前 需要完成节点的克隆 克隆任何一个都行 参数为true表示允许克隆29 var clone=node1.cloneNode(true);30 //使用父节点 完成互换31 node2parent.replaceChild(clone,node2);32 node1parent.replaceChild(node2,node1);33 }34 }35 </script>36 </head>37 <body>38 <p>你喜欢哪个城市?</p>39 <ul id="city">40 <li id="bj" name="BeiJing">北京</li>41 <li>上海</li>42 <li>东京</li>43 <li>首尔</li>44 </ul>45 46 <br><br>47 <p>你喜欢哪款单机游戏?</p>48 <ul id="game">49 <li id="rl">红警</li>50 <li>实况</li>51 <li>极品飞车</li>52 <li>魔兽</li>53 </ul>54 55 <br><br>56 gender:57 <input type="radio" name="gender" value="male"/>Male58 <input type="radio" name="gender" value="female"/>Female59 60 <br><br>61 name: <input type="text" name="username" value="atguigu"/>62 63 </body>64 </html>
运行效果：
-----------------
-----------------------
-----------------
------------------
以上就通过循环的方式 把内容全部换位置
-----------------------------------
下面需要实现的需求是 当用户单击某个文本，两个对应直接的文本才会互换(情况一：单击之后，无法复原)
1 <script type="text/javascript"> 2 window.onload=function(){ 3 //得到所有的li节点 4 var linodes=document.getElementsByTagName("li"); 5 //使用循环进行互换 6 for(var i=0;i<linodes.length;i++){ 7 //手动 为每一个元素设置index属性 8 linodes[i].index=i; 9 //这里为每一个文本都设置单击事件10 linodes[i].onclick=function(){11 //目标下标12 var targetIndex=0;13 if(this.index<4){14 targetIndex=4+this.index;15 }else{16 targetIndex=this.index-4;17 }18 changeshow(this,linodes[targetIndex]);19 }20 }21 }22 //先定义一个互换的函数23 function changeshow(node1,node2){24 //找到各自对应的父节点25 var node1parent=node1.parentNode;26 var node2parent=node2.parentNode;27 //如果父节点存在 那么可以进行互换28 if(node1parent&&node2parent){29 //互换之前 需要完成节点的克隆 克隆任何一个都行 参数为true表示允许克隆30 var clone=node1.cloneNode(true);31 //使用父节点 完成互换32 node2parent.replaceChild(clone,node2);33 node1parent.replaceChild(node2,node1);34 }35 }36 </script>
运行效果，就是单击某个文本，对应位置的文本会和该文本进行互换
对上面的的程序进行改进(情况二：单击之后，可以复原，每次单击都能换位置) 不要求掌握 了解即可
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //得到所有的li节点 9 var linodes=document.getElementsByTagName("li");10 //使用循环进行互换11 for(var i=0;i<linodes.length;i++){12 //手动 为每一个元素设置index属性13 linodes[i].index=i;14 //这里为每一个文本都设置单击事件15 linodes[i].onclick=function(){16 alert("index"+this.index);17 //目标下标18 var targetIndex=0;19 if(this.index<4){20 targetIndex=4+this.index;21 }else{22 targetIndex=this.index-4;23 }24 25 //交换之前设置index属性 这样就可以持续的进行互换操作了26 var vvv=this.index;27 this.index=targetIndex;28 linodes[targetIndex].index=vvv;29 30 changeshow(this,linodes[targetIndex]);31 32 33 34 }35 }36 }37 //先定义一个互换的函数38 function changeshow(node1,node2){39 //找到各自对应的父节点40 var node1parent=node1.parentNode;41 var node2parent=node2.parentNode;42 //如果父节点存在 那么可以进行互换43 if(node1parent&&node2parent){44 //互换之前 需要完成节点的克隆 克隆任何一个都行 参数为true表示允许克隆45 var clone=node1.cloneNode(true);46 47 clone.onclick=node1.onclick;//同时交互onclick事件48 clone.index=node1.index;//index属性 也进行交换49 50 //使用父节点 完成互换51 node2parent.replaceChild(clone,node2);52 node1parent.replaceChild(node2,node1);53 }54 }55 </script>56 </head>57 <body>58 <p>你喜欢哪个城市?</p>59 <ul id="city">60 <li id="bj" name="BeiJing">北京</li>61 <li>上海</li>62 <li>东京</li>63 <li>首尔</li>64 </ul>65 66 <br><br>67 <p>你喜欢哪款单机游戏?</p>68 <ul id="game">69 <li id="rl">红警</li>70 <li>实况</li>71 <li>极品飞车</li>72 <li>魔兽</li>73 </ul>74 75 <br><br>76 gender:77 <input type="radio" name="gender" value="male"/>Male78 <input type="radio" name="gender" value="female"/>Female79 80 <br><br>81 name: <input type="text" name="username" value="atguigu"/>82 83 </body>84 </html>
------------------------------------------------
节点的删除：
1 <body> 2 <p>你喜欢哪个城市?</p> 3 <ul id="city"> 4 <li id="bj" name="BeiJing">北京</li> 5 <li>上海</li> 6 <li>东京</li> 7 <li>首尔</li> 8 </ul> 9 10 <br><br>11 <p>你喜欢哪款单机游戏?</p>12 <ul id="game">13 <li id="rl">红警</li>14 <li>实况</li>15 <li>极品飞车</li>16 <li>魔兽</li>17 </ul>18 19 <br><br>20 gender:21 <input type="radio" name="gender" value="male"/>Male22 <input type="radio" name="gender" value="female"/>Female23 24 <br><br>25 name: <input type="text" name="username" value="atguigu"/>26 27 </body>
1 <script type="text/javascript"> 2 window.onload=function(){ 3 //节点的删除 4 alert("确定删除北京") 5 var bj=document.getElementById("bj"); 6 //得到它的父节点 然后删除 7 var parent=bj.parentNode; 8 parent.removeChild(bj);//连缀方式：bj.parentNode.removeChild(bj); 9 }10 </script>
运行效果：
---------------------------
对话框：confirm
1 <script type="text/javascript">2 var b=confirm("这是一个对话框,返回值是boolean");3 alert(b);//上面的对话框 单击确定 返回值为true 单击取消 返回值为false4 </script>
运行效果：
单击确定：
单击取消：
-----------------------------------
小实验：当用户单击相应的文本的时候 弹出对话框 如果用户单击确定 那么就把对应的节点删除
1 <script type="text/javascript"> 2 window.onload=function(){ 9 10 //获得所有的li节点11 var linodes=document.getElementsByTagName("li");12 //为每一个li节点设置单击事件 使用循环的方式13 for(var i=0;i<linodes.length;i++){14 linodes[i].onclick=function(){//当用户点击相应的文本的时候 会首先弹出对话框 如果点击确定 那么执行删除 取消则什么也不做15 var flag=confirm("确定删除"+ this.childNodes[0].nodeValue +"的信息吗");//因为li节点只有一个子节点16 if(flag){17 //执行删除18 this.parentNode.removeChild(this);19 }20 }21 }22 23 }26 27 </script>
JavaScript(DOM编程二)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。