Python Day56-57 js

標籤：標籤   child   innertext   class   對象   tle   ons   code   delete   

一、節點操作

　　常用的節點主要為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_outervar 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父級標籤，包含所有子標籤

Python Day56-57 js