javascript學習筆記(十九) 節點的操作實現代碼

本節要用到的html例子 複製代碼 代碼如下:<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>

1.建立元素節點
document.createElement() 方法 用於建立元素，接受一個參數，即要建立元素的標籤名，返回建立的元素節點 複製代碼 代碼如下:var div = document.createElement("div"); //建立一個div元素
div.id = "myDiv"; //設定div的id
div.className = "box"; //設定div的class

建立元素後還要把元素添加到文檔樹中

2.添加元素節點
appendChild() 方法 用於向childNodes列表的末尾添加一個節點，返回要添加的元素節點 複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML = "項目四"; //向li內添加文本
ul.appendChild(li); //把li 添加到ul子節點的末尾

添加後: 複製代碼 代碼如下:<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
<li>項目四</li>
</ul>

appendChild() 方法還可以添加已經存在的元素，會將元素從原來的位置移到新的位置 複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾

運行後(IE)： 複製代碼 代碼如下:<ul id="myList">
<li>項目二</li>
<li>項目三</li>
<li>項目一</li>
</ul>

insertBefore() 方法 ，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個參數，第一個是要插入的節點，第二個是參照節點，返回要添加的元素節點 複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML= "項目四"; //向li內添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一個子節點前

添加後: 複製代碼 代碼如下:<ul id="myList">
<li>項目四</li>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>

複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML= "項目四"; //向li內添加文本
ul.insertBefore(li,ul.null); //把li添加到ul的子節點末尾

添加後: 複製代碼 代碼如下:<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
<li>項目四</li>
</ul>

複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML= "項目四"; //向li內添加文本
var lis = ul.getElementsByTagName("li") //擷取ul中所有li的集合
ul.insertBefore(li,lis[1]); 　　　　//把li添加到ul中的第二個li節點前

添加後: 複製代碼 代碼如下:<ul id="myList">
<li>項目一</li>
<li>項目四</li>
<li>項目二</li>
<li>項目三</li>
</ul>

3.移除元素節點
removeChild() 方法 ，用於移除節點，接受一個參數，即要移除的節點，返回被移除的節點，注意被移除的節點仍然在文檔中，不過文檔中已沒有其位置了 複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一個子節點1 var ul = document.getElementById("myList"); //獲得ul
var lis = ul.getElementsByTagName("li") //擷取ul中所有li的集合
ul.removeChild(lis[0]); 　　　　　　//移除第一個li，與上面不同，要考慮瀏覽器之間的差異

4.替換元素節點
replaceChild() 方法 ，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要替換的節點，返回被替換的節點 複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替換ul第一個子節點1 var ul = document.getElementById("myList"); //獲得ul;
var li = document.createElement("li"); //建立li
li.innerHTML= "項目四"; //向li內添加文本
var lis = ul.getElementsByTagName("li") //擷取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用建立的li替換原來的第二個li

5.複製節點
cloneNode() 方法，用於複製節點， 接受一個布爾值參數， true 表示深複製（複製節點及其所有子節點）， false 表示淺複製（複製節點本身，不複製子節點） 複製代碼 代碼如下:var ul = document.getElementById("myList"); //獲得ul
var deepList = ul.cloneNode(true); //深複製
var shallowList = ul.cloneNode(false); //淺複製

節點的操作要注意IE和其它瀏覽器的差異（第十八節中有講到）