javascript學習筆記(十九) 節點的操作實作程式碼_基礎知識
- WBOY原創
- 2016-05-16 17:52:25973瀏覽
本節要用到的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的第一個子節點前
加後:
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節點前
新增後:
複製程式碼新增後:
程式碼如下:
- 項目一
- 項目四
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和其它瀏覽器的差異（第十八節有講到）
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn