javascript學習筆記(十九) 節點的操作實作程式碼_基礎知識

本節要用到的html範例

複製程式碼 程式碼如下:

• 項目一


• 項目二


• 項目三

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子節點的結尾

新增後:

複製程式碼 程式碼如下:

項目一

項目二

項目三

項目四

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

複製程式碼 程式碼如下: var ul = document.getElementById("myList"); ul

ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾

運行後(IE)：

複製程式碼 程式碼如下:

項目二

項目三

項目一

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

複製程式碼 程式碼如下: var ul = document.getElementById("myList");取得ul

var li = document.createElement("li"); //建立li

li.innerHTML= "項目四"; //為li內新增文字
ul.insertBefore(li,ul .firstChild); //把li加到ul的第一個子節點前


加後:

複製程式碼複製程式碼

代碼如下:

• 項目四


• 項目一


• 項目二


• 項目三

複製程式碼

程式碼如下:

var ul = document.getElementById("myList"); //取得ul
var li = document.create ("li"); //建立li
li.innerHTML= "項目四"; //在li內部加入文字
ul.insertBefore(li,ul.null); //把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加到ululul中的第二個li節點前


新增後:

複製程式碼


程式碼如下:

• 項目一
• 項目四

項目二 li>

項目三

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

複製程式碼

程式碼如下: var ul = document.getElementById("myList"); //取得ul var fromFirstChild = ul.remove (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.複製節點
cloneNodeNode () 方法，用於複製節點， 接受一個布林值參數， true 表示深複製（複製節點及其所有子節點）， false 表示淺複製（複製節點本身，不複製子節點）

複製程式碼 程式碼如下: var ul = document.getElementById("myList");取得 //取得ul var deepList = ul.cloneNode(true); //深複製var shallowList = ul.cloneNode(false); //淺複製 節點的操作要注意IE和其它瀏覽器的差異（第十八節有講到）