python之路_前端基础之JS4
一、节点操作
常用的节点主要为document和element，上一篇内容我们讲述了节点的查找和节点属性的操作，本节则主要列述节点本身的创建、增加、删除、替换等操作。
1、创建节点
通过如下语法可以创建一个元素标签，可以对创建的元素标签进行赋值操作和属性操作，应用实例如下：
var ele_img=document.createElement("img"); //创建节点对象ele_img,为img标签元素
ele_img.src="meinv.jpg"; //标签属性的赋值操作，也可以通过原生JS的方式进行
ele_img.height="400";
ele_img.width="250";
2、增加节点
增加节点操作首先需要找到一个父级节点，对父级节点进行增加节点操作，因为增加节点时需要有新的节点对象，即待被增加的节点标签，故其通常和创建节点一起使用，应用实例如下：
var ele_outer=document.getElementsByClassName("outer")[0]; //获得一个父级节点ele_outer
var ele_append=document.getElementsByClassName("append")[0]; //通过绑定事件形式触发增加节点
ele_append.onclick=function () {
var ele_img=document.createElement("img"); //创建待插节点
ele_img.src="meinv.jpg";
ele_img.height="400";
ele_img.width="250";
ele_outer.appendChild(ele_img) //追加节点，会将节点追加在最后
};
上述append节点的方式会把增加的节点追加在父级节点中所有子标签的最后面，如果需要指定增加位置，需要用insertchild的方式，此时需要指定一个已存在的子标签，实例如下：
var ele_outer=document.getElementsByClassName("outer")[0]; //获得一个父级节点
var ele_p=document.getElementsByTagName("p")[0]; //获得父级节点下的一个子节点，作为插入节点参考节点
var ele_append=document.getElementsByClassName("append")[0];
ele_append.onclick=function () {
var ele_img=document.createElement("img"); //创建待插节点
ele_img.src="meinv.jpg";
ele_img.height="400";
ele_img.width="250";
ele_outer.insertBefore(ele_img,ele_p) //插入节点，语法顺序为：（待插入节点，参考节点）
};
3、删除节点
同样删除节点也是需要指定父级节点，通过移除其某个子级元素的方式将某个子级元素进行删除，具体实例如下：
var ele_outer=document.getElementsByClassName("outer")[0]; //获得一个父级节点对象
var ele_p=document.getElementsByTagName("p")[0]; //获得父级标签下的一个子级节点对象
var ele_delete=document.getElementsByClassName("delete")[0];
ele_delete.onclick=function () {
ele_outer.removeChild(ele_p) //删除节点
};
4、节点替换
节点替换也是需要找到一个父级节点，对节点下的某本来存在的个子标签进行替换，当然还需创建一个新替换标签，替换掉需要被替换的元素，具体应用实例如下：
var ele_outer=document.getElementsByClassName("outer")[0]; //获得一个父级节点对象
var ele_p=document.getElementsByTagName("p")[0]; //获得父级节点下一个需要被替换的子节点对象
var ele_replace=document.getElementsByClassName("replace")[0];
ele_replace.onclick=function (){
var ele_h1=document.createElement("h1"); //创建一个新替换对象
ele_h1.innerText="美女系列";
ele_outer.replaceChild(ele_h1,ele_p) //替换节点，语法顺序为（新替换节点，旧被替换节点）
}
5、复制节点
具体实例如下：
var ele_outer=document.getElementsByClassName("outer")[0];
var ele_copy=ele_outer .cloneNode();
console.log(ele_copy) //结果即为outer父级标签，不包含任何子标签
var ele_copy=ele_outer .cloneNode(true);
console.log(ele_copy) //结果为outer父级标签，包含所有子标签
二、模态框实例
1、事件委派
通常我们为了给某类标签元素绑定事件时，我们都是逐一或者通过循环的方式给其进行绑定事件操作，但是这种方式会带来一个问题是：后来插入的同类型标签也xu要有这样的事件时，之前绑定的事件的结果对后插入的同类元素无效，原因是程序在启动时已经加载了之前绑定事件的代码，那时后来新添加的元素并不在其中。
此问题就可以通过事件委派的方式进行解决，所谓事件委派就是通过一定形式对其父级标签进行委派（绑定事件），其结果就是父级下的所有后代都可以执行事件的内容，可以通过条件限制使得只有满足条件的后代元素才能执行事件内容。应用实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="add">添加</button> <ul class="outer"> <li>111</li> <li class="c2">222</li> <li>333</li> </ul> <script> //无条件事件委派：父级节点ele_outer下的所有后代都会在被点击时会执行alert，即使后来插入的数据 var ele_outer=document.getElementsByClassName("outer")[0]; ele_outer.addEventListener("click",function (event) { alert(event.target.innerText) //event.target等价于this }); //条件事件委派：通过条件限制，对父级中的后代选择性进行执行，如下只有classname="c2"的才会执行事件 var ele_outer=document.getElementsByClassName("outer")[0]; ele_outer.addEventListener("click",function (event) { if(event.target.className=="c2"){ alert(event.target.innerText) } }); //插入数据事件 var ele_add=document.getElementsByClassName("add")[0]; ele_add.onclick=function () { var ele_li=document.createElement("li"); ele_li.innerText="444"; ele_outer.appendChild(ele_li) } </script> </body> </html>
2、模态框实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .show{ position: fixed; top: 10px; right: 10px; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #cccccc; opacity: 0.5; } .model{ position: fixed; width: 300px; height: 180px; top: 150px; left:500px; background-color: white; border: 1px solid cadetblue; } </style> </head> <body> <div> <button class="show">添加</button> <table border="1" cellpadding="10" cellspacing="5"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>18</td> <td>s7</td> <td> <button>修改</button> <button class="deleter">删除</button> </td> </tr> <tr> <td>李四</td> <td>22</td> <td>s7</td> <td> <button>修改</button> <button class="deleter">删除</button> </td> </tr> <tr> <td>王五</td> <td>26</td> <td>s7</td> <td> <button>修改</button> <button class="deleter">删除</button> </td> </tr> </table> </div> <div class="shade hide item"></div> <div class="model hide item"> <form action=""> <p>姓名：<input type="text" class="text"></p> <p>年龄：<input type="text" class="text"></p> <p>班级：<input type="text" class="text"></p> <p> <input type="button" value="确定" class="ensure"> <input type="button" value="取消" class="cancel"> </p> </form> </div> <script> //点击添加按钮，显示遮罩层和弹出框 var ele_show=document.getElementsByClassName("show")[0]; ele_show.onclick=function () { var ele_item=document.getElementsByClassName("item"); for(var i=0;i<ele_item.length;i++){ ele_item[i].classList.remove("hide") } }; //点击弹出框中的取消按钮，隐藏遮罩层和弹出框 var ele_cancel=document.getElementsByClassName("cancel")[0]; ele_cancel.onclick=function () { var ele_item=document.getElementsByClassName("item"); for(var i=0;i<ele_item.length;i++) { ele_item[i].classList.add("hide") } }; var ele_text=document.getElementsByClassName("text"); var ele_ensure=document.getElementsByClassName("ensure")[0]; var ele_tr=document.createElement("tr"); //添加内容事件 ele_ensure.onclick=function () { for (var k = 0; k < ele_text.length; k++) { var ele_td = document.createElement("td"); ele_td.innerText = ele_text[k].value; ele_tr.appendChild(ele_td) } var ele_td1=document.createElement("td"); ele_td1.innerHTML="<button>修改</button> <button class=\"deleter\">删除</button>"; ele_tr.appendChild(ele_td1); var ele_tbody=document.getElementsByTagName("tbody")[0]; ele_tbody.appendChild(ele_tr); var ele_item=document.getElementsByClassName("item"); for(var j=0;j<ele_item.length;j++) { ele_item[j].classList.add("hide") } }; /*通过事件委派，可以对父级下所有符合条件的元素进行删除操作，解决直接对删除按钮进行绑定事件时，后续添加内容无法执行删除的问题*/ var ele_tbody=document.getElementsByTagName("tbody")[0]; ele_tbody.addEventListener("click",function (event) { if(event.target.className=="deleter"){ var ele_tr=event.target.parentElement.parentElement; ele_tbody.removeChild(ele_tr) } }) </script> </body> </html>
