Python Day56-57 js

Posted 2020-10-14 大象和骆驼

一、节点操作

　　常用的节点主要为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父级标签，包含所有子标签