DOM Node 的創建、刪除與修改

在以前的介紹中，咱們已經理解了DOM Node的類型、以及節點之間的查找與關係。那麼在今天的介紹裏咱們將繼續來講明，如何經過DOM API來創建新的節點、修改以及刪除節點。

DOM 節點的新增

document.createElement(tagName)

經過document.createElement()能夠創建一個新的元素：

var newDiv = document.createElement('div');
複製代碼

在創建新的div元素newDiv後，這時候咱們在瀏覽器上還看不到它，直到經過appendChild()、insertBefore()或replaceChild()等方法將新元素加入至指定的位置以後纔會顯示。

新創建的newDiv咱們也能夠同時對它指定屬性，如：

newDiv.id = "myNewDiv"; 
newDiv.className = "box";
複製代碼

document.createTextNode()

以前曾介紹過，除了HTML元素節點外，還有文字節點，那麼document.createTextNode()就是用來創建文字節點的方法。

用法很簡單，直接在document.createTextNode()加入字符串便可。跟createElement同樣的是，新增的TextNode在被加入至某個節點前，咱們是看不到它的。

var newDiv = document.createElement('div');

// 創建 textNode 文字節點
var textNode = document.createTextNode("Hello world!");

// 經過 newDiv.appendChild 將 textNode 加入至 newDiv 
newDiv.appendChild(textNode);
複製代碼

document.createDocumentFragment()

在DOM規範的全部節點之中，DocumentFragment算是最特殊的一種，它是一種沒有父層節點的最小化文件對象。能夠把它看做是一個輕量化的Document，用如同標準文件通常的方式來保存片斷的文件結構。

例如，一開始咱們有一個HTML 的容器元素：

<ul id="myList"></ul>
複製代碼

接着咱們經過document.createDocumentFragment()來創建DocumentFragment：

// 取得外層容器 myList
var ul = document.getElementById("myList");

// 創建一個 DocumentFragment，能夠把它看做一個虛擬的容器
var fragment = document.createDocumentFragment();

for (var i = 0; i < 3; i++){
  // 生成新的 li，加入文字後置入 fragment 中。
  let li = document.createElement("li");
  li.appendChild(document.createTextNode("Item " + (i+1)));
  fragment.appendChild(li);
}

// 最後將組合完成的 fragment 放進 ul 容器
ul.appendChild(fragment);
複製代碼

經過操做DocumentFragment與直接操做DOM最關鍵的區別在於DocumentFragment不是真實的DOM結構，因此說DocumentFragment的變更並不會影響目前的網頁文件，也不會致使迴流（reflow）或引發任何影響效果的狀況發生。

document.write()

document對象要將某內容寫入網頁也能夠用write()方法，當瀏覽器讀取頁面，解析到document.write()的時候就會停下來，而且將內容輸出，且不僅是單純的字符串，也能夠是HTML的標籤。

咱們只要將對應的HTML 字符串傳入：

document.write("<h1>Hello World!</h1>");
複製代碼

甚至，若是要新增一個<script>標籤，並指定外部js資源也是能夠的，但要注意的是：

// 寫成這樣， </script>會變成目前 script 塊的結束，致使錯誤 
document.write("<script type=\"text\javascript\" src=\"file.js\">" + "</script>");

// 爲了不這種問題，要將結尾的標籤這種寫法 <\/script> 就 ok 了 
document.write("<script type=\"text\javascript\" src=\"file.js\">" + "<\/script>");
複製代碼

另外，須要特別注意的是，當網頁已經讀取完成後才執行document.write()，則裏面的內容會徹底覆蓋掉目前的網頁：

window.onload = function(){   
  document.write("Hello world!"); 
};
複製代碼

上面例子的window.onload表示網頁已載入完成，此時不管網頁本來有什麼內容，都會被"Hello world!"所覆蓋。

DOM 節點的修改與刪除

上面介紹了不少創建DOM節點的方法，除了最後的document.write以外，其餘都只是單純創建節點，並未輸出至網頁上。

那麼，接下來要介紹的幾個方法，則說明要如何將剛剛創建好的DOM 節點，置入到咱們所須要指定的位置上。

NODE.appendChild(childNode)

經過appendChild()方法，能夠將指定的childNode節點，加入到Node父容器節點的末端：

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 創建新的 <li> 元素 var newList = document.createElement('li'); // 創建 textNode 文字節點 var textNode = document.createTextNode("Hello world!"); // 經過 appendChild 將 textNode 加入至 newList newList.appendChild(textNode); // 經過 appendChild 將 newList 加入至 myList myList.appendChild(newList); </script>
複製代碼

NODE.insertBefore(newNode, refNode)

insertBefore()方法，則是將新節點newNode插入至指定的refNode節點的前面：

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 取得 "<li>Item2</li>" 的元素 var refNode = document.querySelectorAll('li')[1]; // 創建 li 元素節點 var newNode = document.createElement('li'); // 創建 textNode 文字節點 var textNode = document.createTextNode("Hello world!"); newNode.appendChild(textNode); // 將新節點 newNode 插入 refNode 的前方 myList.insertBefore(newNode, refNode); </script>
複製代碼

NODE.replaceChild(newChildNode, oldChildNode)

replaceChild()方法，則是將本來的oldNode替換成指定的newNode。

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 取得 "<li>Item2</li>" 的元素 var oldNode = document.querySelectorAll('li')[1]; // 創建 li 元素節點 var newNode = document.createElement('li'); // 創建 textNode 文字節點 var textNode = document.createTextNode("Hello world!"); newNode.appendChild(textNode); // 將原有的 oldNode 替換成新節點 newNode myList.replaceChild(newNode, oldNode); <script> 複製代碼

NODE.removeChild(childNode)

removeChild()方法，則是將指定的childNode子節點移除。

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 取得 "<li>Item2</li>" 的元素 var removeNode = document.querySelectorAll('li')[1]; // 將 myList 下的 removeNode 節點移除 myList.removeChild(removeNode); </script>
複製代碼

相信看完今天的分享，已經有能力能夠經過DOM 提供的API 來進行節點的新增、修改以及刪除了吧。

你們也許會發現，不管要對網頁元素作出什麼樣的操做，咱們都會基於某個節點出發對吧？

恰好呼應阿基米德的一句衆所周知的名言：

「給我一個支點，我就能撬動整個地球。」

那麼有了DOM API 的幫助後， JavaScript 也能夠說：

「給我一個節點，我就能創建整個網頁世界。」

若是以爲文章對你有些許幫助，歡迎在個人GitHub博客點贊和關注，感激涕零！