• DOM1級定義了一個Node接口，該接口有DOM中的所有節點類型實現。
• 這個Node接口在javascript中是作為Node類型實現的
• javascript中，所有節點類型都繼承自Node類型，因此所有節點逗共享著相同的基本屬性和方法。

注：除了ie之外，其他瀏覽器都可以訪問到Node類型

一、屬性

1.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)?

if(someNode.nodeType == Node.ELEMENT_NODE){ //ie中，Node未定義，javascript高級程序設計3中說ie沒有公開Node類型的構造函數。alert("this is an element!"); } if(someNode.nodeType == 1){ //適用于所有瀏覽器alert("this is an element!"); }

2.nodeName和nodeValue屬性

元素節點

（1）nodeName中保存的始終都是元素的標簽名

（2）nodeValue的值始終都是null
文本節點

?

3.childNodes屬性（Node類型的屬性，個人感覺確切說是document對象的屬性）

每個節點都有一個childNodes屬性，其中保存著一個NodeList對象（動態，類數組）。既可以通過方括號[],也可以用item()方法。

看看例子：

html代碼

<div id="wyc"><div id="w">wyc要加油</div><div>wyc要努力</div><div>wyc嘿嘿嘿</div> </div>

js代碼

var wycTarget = document.getElementById("wyc").childNodes;var count = wycTarget.length;for(var i = 0;i < count;i++){console.log(wycTarget[i]);}console.log(count);

看看輸出：

chrome和ie9及以上:括號內是ie9的，和chrome不同的地方

#text(ie:EmptyTextNode) <div id=?"w">?wyc要加油?</div>? #text(ie:EmptyTextNode) <div>?wyc要努力?</div>?#text(ie:EmptyTextNode) <div>?wyc嘿嘿嘿?</div>? #text(ie:EmptyTextNode) 7

ie8及以下：

[object Object][object Object][object Object]3

區別?

(1)ie9及以上和chrome返回了7項，他們統一把\n（換行符）當成文本節點，如果把html代碼變成一行，也會輸出3項，沒有文本節點

(2)ie8會打印出對象，這是因為ie8及更早版本將NodeList實現為一個COM對象，這回造成影響，無法通過Array.prototype.slice()方法將其轉換為數組（而在ie9和chrome中可以）。

(3)下面我們用一種觀察者模式，實現一個將NodeList轉化為數組的接口。

function convertToArray(nodes){var array = null;try{array = Array.prototype.slice.call(nodes, 0);//ie9以上及其他}catch(ex){array = new Array();for(var i = 0,len = nodes.length;i < len;i++){array.push(nodes[i]);}}return array;}

4.parentNode屬性

該屬性指向文檔樹中的父節點。包含在childNodes列表中的所有節點都具有相同的父節點

5.previousSibling和nextSibling屬性

包含在childNodes列表中的每個節點相互之間是同胞節點。previousSiblings返回前一個，nextSibling返回后一個，（注意，是一個），而且如果有空文本節點，會返回#text。

6.firstChild和lastNode

父節點的第一個子節點和最后一個子節點。

注意：如果有空文本節點，會返回#text

二、操作節點（方法）

1.appendChild()

父節點調用，并在childNodes列表末尾添加一個節點。并返回新增的節點。

如果傳入到appendChild()中的節點已經是文檔中的一部分了，那結果就是將該節點從原來的位置轉移到新位置。

var returnNode = someNode.appendChild(someNode.firstChild); alert(returnNode == someNode.firstChild);//false alert(returnNode == aome.lastChild); //true

2.insertBefore()

insertBefore可以把節點插在某個你想插入的位置。兩個參數（要插入的節點，參照節點）。

//插入后成為最后一個節點 var returnNode = someNode.insertBefore(newNode,null); alert(newNode == someNode.lastChild); //插入后成為第一個節點 var returnNode = someNode.insertNode(newNode,someNode.firstChild); alert(returnNode == newNode); //true alert(newNode == someNode.firstNode);//true

3.removeChild()

替換節點。兩個參數（頂替的節點，被替換的節點）。該節點的所有關系指針都會從被它替換的節點復制過來。返回被替換的節點。

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

4.removeChild()

移除，而非替換節點。返回被移除的節點。

var removeNode = someNode.removeChild(someNode.firstChild);

5.cloneNode(),normalize()所有類型的節點都有的

• cloneNode()：創建調用這個方法的節點的一個完全相同的副本。

????????參數：布爾值。true：深復制，復制節點及整個節點樹。false：淺復制，只復制節點本身。

• normalize():處理文檔樹中的文本節點。

????????由于解析器的實現或者DOM操作原因，可能會出現文本節點不包含文本，或者接連出現兩個文本節點（只有在人為插入時才會）的情況。

? ? ????當在某個節點上調用這個方法時。就會在該節點的后代中查找上述兩種情況。并處理，刪除或合并。? ??

轉載于:https://my.oschina.net/wyc1219/blog/826037

總結

以上是生活随笔為你收集整理的DOM节点层次之Node类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。