節點的操作 建立、新增、移除、移動、複製
阿新 • • 發佈：2019-02-15
（1）建立新節點
createDocumentFragment() //建立一個DOM片段 createElement() //建立一個具體的元素 createTextNode() //建立一個文字節點
（2）新增、移除、替換、插入
appendChild() removeChild() replaceChild() insertBefore()
（3）查詢
getElementsByTagName() //通過標籤名稱 getElementsByName() //通過元素的Name屬性的值 getElementById() //通過元素Id，唯一性
本節要用到的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.lastChild); //把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第一個子節點
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第一個子節點
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); //淺複製
原文地址：http://www.wc87.com/original/js/536.html