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

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

一、屬性

1.nodeType屬性（表明節(jié)點類型）

Node類型中定義的12個數(shù)值常量，表示節(jié)點類型，任何節(jié)點必居其一：

• 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高級程序設(shè)計3中說ie沒有公開Node類型的構(gòu)造函數(shù)。alert("this is an element!"); } if(someNode.nodeType == 1){ //適用于所有瀏覽器alert("this is an element!"); }

2.nodeName和nodeValue屬性

元素節(jié)點

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

（2）nodeValue的值始終都是null
文本節(jié)點

?

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

每個節(jié)點都有一個childNodes屬性，其中保存著一個NodeList對象（動態(tài)，類數(shù)組）。既可以通過方括號[],也可以用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及以上:括號內(nèi)是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

區(qū)別?

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

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

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

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屬性

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

5.previousSibling和nextSibling屬性

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

6.firstChild和lastNode

父節(jié)點的第一個子節(jié)點和最后一個子節(jié)點。

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

二、操作節(jié)點（方法）

1.appendChild()

父節(jié)點調(diào)用，并在childNodes列表末尾添加一個節(jié)點。并返回新增的節(jié)點。

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

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

2.insertBefore()

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

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

3.removeChild()

替換節(jié)點。兩個參數(shù)（頂替的節(jié)點，被替換的節(jié)點）。該節(jié)點的所有關(guān)系指針都會從被它替換的節(jié)點復制過來。返回被替換的節(jié)點。

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

4.removeChild()

移除，而非替換節(jié)點。返回被移除的節(jié)點。

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

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

• cloneNode()：創(chuàng)建調(diào)用這個方法的節(jié)點的一個完全相同的副本。

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

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

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

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

轉(zhuǎn)載于:https://my.oschina.net/wyc1219/blog/826037

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。