DOM-Node類型

DOM(文檔隊形模型)是針對HTML和XML文檔的一個API(應用程序編程接口)。DOM描繪了一個層次化的節點樹，允許開發人員添加，移除和修改頁面的一部分。DOM可以講任何HTML和XML文檔描繪成一個有多層次節點構成的結構。節點分為幾種不同的類型，每種類型分別表示文檔中不同的信息。每個節點都擁有各自的特點、數據和方法，另外也與其他節點存在某種關系。節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點為根節點的樹形結構。總共有12種節點類型，這些類型都繼承自一個基類型-Node類型

Node類型

DOM1級定義了一個Node接口，Javascript中的所有節點類型都繼承自Node類型，因此所有節點類型都共享著相同的基本屬性和方法，每個節點都有一個nodeType屬性，用于表明節點的類型。節點類型由在Node類型中定義的下列12個數值常量來表示，任何節點類型必居其一：

Node.ELEMENT_NODE (1) 
Node.ATTRIBUTE_NODE (2) 
Node.TEXT_NODE (3) 
Node.CDATA_SECTION_NODE (4) 
Node.ENTITY_REFERENCE_NODE (5) 
Node.ENTITY_NODE (6) 
Node.PROCESSING_INSTRUCTION_NODE (7) 
Node.COMMENT_NODE (8) 
Node.DOCUMENT_NODE (9) 
Node.DOCUMENT_TYPE_NODE (10) 
Node.DOCUMENT_FRAGMENT_NODE (11) 
Node.NOTATION_NODE (12)

通過比較上面這些常量，可以很容易的確定節點的類型

1         if(someNode.nodeType == Node.ELEMENT_NODE){ //在IE中無效2             alert("Node is an element");3         }

為了確保跨瀏覽器兼容，最好還是將nodeType屬性與數字值比較

1         if(someNode.nodeType == 1){ 
2             alert("Node is an element");3         }

1、nodeName和nodeValue屬性

要了解節點的具體屬性，可以使用這兩個屬性，他們的值完全取決于節點的類型，在使用這兩個值之前，最好是像下面這樣先檢測一下節點的類型

1         if(someNode.nodeType == 1){2             value = someNode.nodeName; //nodeName的值是元素的標簽名3         }

2、節點關系

每個節點都有一個childNodes屬性，其中保存著一個NodeList對象。NodeList是一種類數組對象，用于保存一組有序的節點，可以通過為止來訪問這些節點。要注意他不是Array的實例，他實際上是基于DOM結構動態執行查詢的結果，因此DOM結構的變化能夠自動反映在NodeList對象中，要訪問NodeList中的節點可以通過方括號，也可以使用item()方法，另外也與其他節點存在某種關系。節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點。

1         var fitstChild = sonmeNode.childNodes[0];2         var secondChild = someNode.childNodes.item(1);3         var count = someNode.childNodes.length;

在前面介紹過，對arguments對象使用Array.prototype.slice()方法可以將其轉換為數組，對于NodeList也適用。

 1         //在IE8及之前版本無效 2         var arrayOfNodes = Array.prototype.alice.call(someNode.childNodes,0); 3  4         //兼容所有瀏覽器 5         function converToArray(nodes){ 6             var array = null; 7             try{ 8                 array = Array.prototype.slice.call(nodes,0); //針對非IE瀏覽器 9             }catch(ex){10                 array = new Array();11                 for(var i=0,len = nodes.length;i < len; i++){12                     array.push(nodes[i]);13                 }14             }15             return array;16         }

每一個節點都有一個parentNode屬性，該屬性指向文檔樹中的父節點。包含在childNodes列表中的所有節點都具有相同的父節點，因此他們的paternNode屬性都指向同一個節點。此外包含在childNodes列表中的每個節點相互之間都是同胞節點。通過使用列表中每個節點的previousSibling和nextSibling屬性，可以訪問同一列表中的其他節點列表中第一個節點的previousSibling屬性值為null，而列表中最后一個節點的nextSlbling屬性的值同樣也是null

父節點的firstChild和lastChild屬性分別指向起childNodes列表中的第一個和最后一個節點。其中someNode.firstChild等于someNode.childNodes[0],而someNode.lastChild等于someNode.childNodes[someNode.childNodes.length - 1]

hasChildNodes()在節點包含一個或多個子節點的情況下返回true

所有節點都有的最后一個屬性是ownerDocument,該屬性指向表示整個文檔的文檔節點，通過這個屬性，我們可以不必在節點層次中層層回溯到頂端，而是可以直接訪問文檔節點

3、操作關系

appendChild(),用于向childNodes列表的末尾添加一個節點，相應的指針關系會更新，更新完成后返回一個新增的節點。

1         var returnNode = someNode.appendChild(newNode);2         console.log(returnNode = someNode.firstChild); //true3         console.log(returnNode = newNode);    //true

如果傳入到appendChild()方法中的參數已經是文檔中的一部分，則他會從原來的位置轉移到新的位置，例如

1         var returnNode = someNode.appendChild(someNode.firstChild);2         console.log(returnNode = sonmeNode.firstChild); //false3         console.log(returnNode = someNode.lastChild); //true

insertBefore()把節點放在列表中某個特定的位置上。接受兩個參數：插入的節點和作為參考的節點。插入的節點會作為參考節點的前一個同胞節點，同時被返回，如果參照節點是null，則和appendChild()相同

1         //插入后成為第一個節點2          returnNode = someNode.insertBefore(newNode,someNode.childNodes[0]);3          //插入后成為最后一個節點4          returnNode = someNode.insertBefore(newNode,someNode.lastChild);5          //插入到最后一個節點的前面6          returnNode = someNode.insertBefore(newNode,someNode.childNodes[someNode.childNodes.length - 1]);

replaceChild()替換某個節點，接受兩個參數：插入的節點和要替換的節點。要替換的節點將由這個方法返回并從文檔樹中移除。

1          //替換第一個子節點2          var returnNode = replaceChild(newNode,someNode.firstChild);

removeChild()移除某個節點，接受一個參數即要移除的節點并返回它。

1          //移除第一個子節點2          var returnNode = removeChild(someNode.childNodes[0]);

4、其他方法

有兩個方法是所有類型的節點都有的：cloneNode()和normalize()

cloneNode()方法接受一個布爾值參數，表示是否執行深復制，參數為true時，執行深復制。也就是復制節點本身和整個子節點樹。參數為false時，執行淺復制即只復制節點本身。復制后返回的節點副本屬于文檔所有，但并沒有為他指定父節點。因此，這個節點的副本就成為了一個“孤兒”，除非通過appendChild()、insertBefore()或replaceChild()將他添加到文檔中，例如：

 1          <ul> 2              <li></li> 3              <li></li> 4              <li></li> 5          </ul> 6  7          //如果我們已經將<ul>元素的引用保存在了myList中， 8  9          var deepList = myList.cloneNode(true);10          console.log(deepList.childNodes.length); //311 12          var shallowList = myList.cloneNode(false);13          concole.log(shallow.childNodes.length); //0

cloneNode()方法不會復制添加到DOM節點中的JavaScript屬性，例如事件處理程序等。

normalize()唯一的作用就是處理文檔中的文本節點，由于解析器的實現或者DOM操作等原因，可能會出現文本節點不包含文本，或者接連出現兩個文本節點的情況。當在某個節點上調用這個方法時，就會在該節點中查照上述兩種情況。如果找到了空文本節點，則刪除它。如果找到相鄰的文本節點，則將它們合并為一個文本節點。