節點的操作 創建、添加、移除、移動、復制

DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。

（1）創建新節點

      createDocumentFragment()    //創建一個DOM片段

      createElement()   //創建一個具體的元素

      createTextNode()   //創建一個文本節點

（2）添加、移除、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //通過標簽名稱

      getElementsByName()    //通過元素的Name屬性的值

      getElementById()    //通過元素Id，唯一性

 

本節要用到的html例子

1 <ul id="myList">
2     <li>項目一</li>
3     <li>項目二</li>
4     <li>項目三</li>
5 </ul>

1.創建元素節點
document.createElement() 方法 用於創建元素，接受一個參數，即要創建元素的標簽名，返回創建的元素節點

1 var div = document.createElement("div");  //創建一個div元素
2 div.id = "myDiv";        //設置div的id
3 div.className = "box";    //設置div的class

創建元素后還要把元素添加到文檔樹中

2.添加元素節點
appendChild() 方法 用於向childNodes列表的末尾添加一個節點，返回要添加的元素節點

1 var ul = document.getElementById("myList");    //獲得ul
2 var li = document.createElement("li");         //創建li
3 li.innerHTML = "項目四";                    //向li內添加文本
4 ul.appendChild(li);                //把li 添加到ul子節點的末尾

添加后:

1 <ul id="myList">
2     <li>項目一</li>
3     <li>項目二</li>
4     <li>項目三</li>
5     <li>項目四</li>
6 </ul>

appendChild() 方法還可以添加已經存在的元素，會將元素從原來的位置移到新的位置

1 var ul = document.getElementById("myList");    //獲得ul
2 ul.appendChild(ul.firstChild);            //把ul的第一個元素節點移到ul子節點的末尾

運行后(IE)：

1 <ul id="myList">
2     <li>項目二</li>
3     <li>項目三</li>
4     <li>項目一</li>
5 </ul>

insertBefore() 方法 ，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個參數，第一個是要插入的節點，第二個是參照節點，返回要添加的元素節點

1 var ul = document.getElementById("myList");    //獲得ul
2 var li = document.createElement("li");         //創建li
3 li.innerHTML= "項目四";                    //向li內添加文本
4 ul.insertBefore(li,ul.firstChild);        //把li添加到ul的第一個子節點前

添加后:

1 <ul id="myList">
2     <li>項目四</li>
3     <li>項目一</li>
4     <li>項目二</li>
5     <li>項目三</li>
6 </ul>

1 var ul = document.getElementById("myList");    //獲得ul
2 var li = document.createElement("li");         //創建li
3 li.innerHTML= "項目四";               //向li內添加文本
4 ul.insertBefore(li,ul.lastChild);        //把li添加到ul的子節點末尾

添加后:

1 <ul id="myList">
2     <li>項目一</li>
3     <li>項目二</li>
4     <li>項目三</li>
5     <li>項目四</li>
6 </ul>

1 var ul = document.getElementById("myList");    //獲得ul
2 var li = document.createElement("li");         //創建li
3 li.innerHTML= "項目四";                    //向li內添加文本
4 var lis = ul.getElementsByTagName("li")   //獲取ul中所有li的集合
5 ul.insertBefore(li,lis[1]);        　　　　//把li添加到ul中的第二個li節點前

添加后:

1 <ul id="myList">
2     <li>項目一</li>
3     <li>項目四</li>
4     <li>項目二</li>
5     <li>項目三</li>
6 </ul>

 

3.移除元素節點
removeChild() 方法 ，用於移除節點，接受一個參數，即要移除的節點，返回被移除的節點，注意被移除的節點仍然在文檔中，不過文檔中已沒有其位置了

1 var ul = document.getElementById("myList");            //獲得ul
2 var fromFirstChild = ul.removeChild(ul.firstChild);    //移除ul第一個子節點

1 var ul = document.getElementById("myList");    //獲得ul
2 var lis = ul.getElementsByTagName("li")        //獲取ul中所有li的集合
3 ul.removeChild(lis[0]);            　　　　　　//移除第一個li，與上面不同，要考慮瀏覽器之間的差異

4.替換元素節點
replaceChild() 方法 ，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要替換的節點，返回被替換的節點

1 var ul = document.getElementById("myList");            //獲得ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild);    //替換ul第一個子節點

1 var ul = document.getElementById("myList");    //獲得ul;
2 var li = document.createElement("li");         //創建li
3 li.innerHTML= "項目四";                    //向li內添加文本
4 var lis = ul.getElementsByTagName("li")        //獲取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]);   //用創建的li替換原來的第二個li

5.復制節點
cloneNode() 方法，用於復制節點， 接受一個布爾值參數， true 表示深復制（復制節點及其所有子節點）， false 表示淺復制（復制節點本身，不復制子節點）

1 var ul = document.getElementById("myList");    //獲得ul
2 var deepList = ul.cloneNode(true);            //深復制
3 var shallowList = ul.cloneNode(false);        //淺復制