DOM節點

1. 節點（Node）類型

   Node接口定義了對應不一樣節點類型的12個常量（它們會在nodeType特性中使用到），IE中沒有定義這些常量，不過咱們能夠本身定義。

   if (typeof Node == undefined) {
       Node = {
           ELEMENT_NODE : 1,
           ATTRIBUTE_NODE : 2,
           TEXT_NODE : 3,
           CDATA_SECTION_NODE : 4,
           ENTITY_REFERENCE_NODE : 5,
           ENTITY_NODE : 6,
           PROCESSING_INSTRUCTION_NODE : 7,
           COMMENT_NODE : 8,
           DOCUMENT_NODE : 9,
           DOCUMENT_TYPE_NODE : 10,
           DOCUMENT_FRAGMENT_NODE : 11,
           NOTATION_NODE : 12
       };
   }

2. Node特性

   經常使用的Node特性介紹（中括號裏是其類型）：

   • nodeName：節點的名字（根據節點類型而定義）【String】
   • nodeValue：節點的值（根據節點類型而定義）【String】
   • nodeType：節點的類型常量值之一【String】
   • ownerDocument：指向這個節點所屬的文檔【Document】
   • childNodes：全部子節點集合【NodeList】
   • firstChild：指向childNodes集合中的第一個節點【Node】
   • lastChild：指向childNodes集合中的最後一個節點【Node】
   • previousSibling：指向前一個兄弟節點，沒有則爲null【Node】
   • nextSibling：指向後一個兄弟節點，沒有則爲null【Node】
   • attributes：一個元素的特性的Attr對象，僅用於Element節點類型【NamedNodeMap】

   在childNodes集合中有一個length屬性能夠用來顯示子節點的個數，好比頁面上有以下元素：

   <div id="box-number">
       <p>one</p>
       <p>two</p>
       <p>three</p>
   </div>

   下面代碼是獲取上面div中子節點的個數：

   var boxNum = document.getElementById('box-number');
   alert(boxNum.childNodes.length); // 輸出3

3. Node方法

   經常使用的Node方法介紹（中括號裏是其返回類型）：

   • hasChildNodes()：當childNodes集合包含一個或多個節點時返回true【Boolean】
   • appendChild(node)：將node添加到childNodes的末尾【Node】
   • removeChild(node)：從childNodes中刪掉node【Node】
   • replaceChild(new, old)：將childNodes中的old節點替換成new節點【Node】
   • insertBefore(new, ref)：在childNodes中的red節點前插入new節點【Node】

   注意在使用appendChild(node)方法時，若是node已經在childNodes當中時，並不會再次添加node節點，而只是將node節點移到childNodes的末尾。

   var boxNum = document.getElementById('box-number'),
       pOne = boxNum.childNodes[0];
   boxNum.appendChild(pOne);
   // 最後會顯示<p>two</p><p>three</p><p>one</p>

4. 處理元素節點的特性

   DOM中定義了四個元素方法來操做元素的特性：

   • getAttribute(name)：獲取特性節點；
   • setAttribute(name, value)：設置特性節點；
   • removeAttribute(name)：移除特性節點；
   • createAttribute(name)：建立特性節點。

   例如獲取上面div中的id特性：

   alert(boxNum.getAttribute('id')); // 輸出box-number

5. 建立和操做節點

   DOM中經常使用到的建立節點的方法包括：

   • createElement(target)：建立標籤名爲target的元素節點；
   • createTextNode(text)：建立包含文本爲text的文本節點；
   • createDocumentFragment()：建立文檔碎片節點。

6. createElement，createTextNode，appendChild

   好比要在上面的id爲box-number的div中的末尾添加一個新元素<p>four</p>：

   var pFour = document.createElement('p'),
       text = document.createTextNode('four');
   pFour.appendChild(text);
   boxNum.appendChild(pFour);

7. removeChild，replaceChild，insertBefore

   移除節點、替換節點和在某節點前插入節點：

   boxNum.removeChild(pOne); // 移除節點<p>one</p>
   
   var pFive = document.createElement('p'),
       text = document.createTextNode('five');
   pFive.appendChild(text);
   
   boxNum.replaceChild(pFive, pFour); // 將節點<p>four</p>替換成<p>five</p>
   
   boxNum.insertBefore(pFour, pFive); // 在節點<p>five</p>前添加節點<p>four</p>

8. 實現insertAfter功能

   利用appendChild方法和insertBefore方法能夠實現insertAfter方法：

   /**
    * 在某個節點後插入一個新節點
    *
    * @param Node newNode 要插入的新節點
    * @param Node ref DOM中已經存在的節點
    * @return Node
    */
   function insertAfter(newNode, ref) {
       ref.nextSibling ? ref.parentNode.insertBefore(newNode, ref.nextSibling) : ref.parentNode.appendChild(newNode);
   }

9. createDocumentFragment

   在進行添加節點操做時，第添加一個節點，頁面就會更新並反映出這個變化。對於少許的更新，這是很好的，然而，當要向DOM中添加大量數據時，若是逐個進行添加，這個過程就會十分緩慢。爲此，能夠建立一個文檔碎片，把全部的新節點附加在其上，而後一次性地將文檔碎片添加到DOM中。

   var nameList = ['cctv', 'asdf', 'keal', 'jack', 'rose'],
       i,
       ii = nameList.length,
       nameP,
       text;
   for (i = 0; i < ii; i++) {
       nameP = document.createElement('p');
       text = document.createTextNode(nameList[i]);
       nameP.appendChild(text);
       document.body.appendChild(nameP);
   }

   上面這段代碼雖然運行良好，但它調用了5次document.body.appendChild()方法，每次都會產生一次頁面更新。這時建立碎片文檔就顯得十分有用：

   var nameList = ['cctv', 'asdf', 'keal', 'jack', 'rose'],
       i,
       ii = nameList.length,
       nameP,
       text,
       fgm = document.createDocumentFragment();
   for (i = 0; i < ii; i++) {
       nameP = document.createElement('p');
       text = document.createTextNode(nameList[i]);
       nameP.appendChild(text);
       fgm.appendChild(nameP);
   }
   document.body.appendChild(fgm);

   上面代碼中每一個新的p元素都先添加在文檔碎片中，最後調用document.body.appendChild()方法來一次性地將碎片中的子節點添加到DOM中，這意味着只須要進行一次頁面更新。