對於已經講解給大家的DOM實戰，我今天給大家幾個實戰程式碼，可以讓大家加深對此的理解！

1.用DOM動態生成這樣一個結構：

1 <div class=”example”>
2 
3       <p class=”slogan”>HelloWorld</p>
4 
5 </div>

我認為中規中矩的寫法是這個樣子的：

1   var div = document.createElement(‘div’),
2   p = document.createElement(‘p’),
3   text = document.create(‘HelloWorld’);
 
4   div.setAttribute(‘class’, ‘example’);
5   p.setAttribute(‘class’, ‘slogan’);
6   p.appendChild(text);
7   div.appendChild(p);
8   document.body.append(div);    

JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)

• 不過這裡有點小提示，節點的className屬性可以讀寫操作class。

因此這裡我們為標籤賦類名的值的時候可以不用setAttribute，可以直接用className。

 1  div.className = ‘example’; 2 p.className = ‘slogan’;  

不過，還有一個最取巧的辦法，那就是直接用innerHTML。

 1 div.innerHTML = <p class=“slogan”>HelloWorld</p> 

2.封裝函式InsertAfter();功能類似insertBefore，直接在原型鏈上程式設計，可以忽略老版本的瀏覽器。

程式碼：

1   Element.insertAfter = function (targetNode, afterNode) {
2         var nextSib = after.nextElementSibling;
3         if(this.children.length <= 1 || !nextSib) {
4               this.appendChild(targetNode);
5         }else {
6               this.insertBefore(targetNode, nextSibling);
7         }
8   }  

這裡是利用了原生的insertBefore方法，我們檢測當只有一個子元素或者我們要找的元素就是最後一個，那麼直接呼叫appendChild方法就可以，否則就找到要找的元素的下一個，然後把它的下一個元素當做insert的元素呼叫insertBefore方法就可以了。

3.封裝remove()函式，使得child.remove()可以銷燬自身。

看題目的要求就是要在原型鏈上程式設計。

程式碼：

1   Element.prototype.remove = function () {
2         var parent = this.parentNode;
3         parent.removeChild(this);
4   }   

JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)

這個問題的程式碼其實很簡單，只要找到這個元素的父級，然後讓父級刪除掉這個元素就可以了。

4.將目標節點內部的節點順序逆序。

eg: <div><p></p><a></a></div>    —>

<div><a></a><p></p></div>

對於這個題目，我的做法是利用我們插入的元素如果是本身就存在的，那麼就會剪下到新的位置上這個特性來做的。

程式碼：

  Element.prototype.reverseElement = function(){
        var len = this.childNodes.length,
              child,
              first = this.firstChild;
        for (var i = 0; i < len - 1; i++){
              child = this.lastChild;
              this.insertBefore(child, first);
        }
  }