Javascript核心之DOM及其節點型別概述
目錄
-
定義
DOM（文件物件模型）是針對HTML和XML文件的API（應用程式程式設計介面），它實現了把文件變成物件的功能。
DOM描繪了一個層次化的節點樹，允許新增、移除、修改頁面的某部分。
DOM可以做到跨語言跨平臺。且符合w3c的標準。
注意：IE中的DOM物件是由COM物件的形式實現的，與原生js的物件不同，所以DOM物件與原生的js物件的行爲或活動特點不一致。
使用DOM的基本條件：html或xml的文件是規範的，（有時候不規範，瀏覽器的解析可以幫助我們在一定程度上將文件自動修改規範）這樣DOM才能 纔能將內容提取出來，變成物件。
-
節點層次
DOM將HTML或XML文件描繪成節點樹，每個節點樹上的節點都有自己的型別，例如下圖。
節點並不止侷限於標籤。
DOM解析的順序是從上到下的，所以，例如js指令碼的位置應放在body的最後，還有一些函數的順序，都與此有關
DOM節點的型別有很多，種類也很多。
節點之間的關係構成了層次，所有頁面標記有特定的根節點。
文件節點
在HTML文件中，根節點是文件節點。而這個文件節點只有一個子節點，就是<html>，我們稱這個子節點爲文件元素。
文件元素是文件的最外層元素，每個文件只有一個文件元素（參照每個HTML文件只有一個<html>標籤，就很容易理解啦）。在HTML中，文件元素只能是<html>，但是在XML中，文件元素可以是任何元素。
在DOM中，共有12種節點型別。
Node型別
定義：DOM1中定義了一個Node介面，該介面由DOM中的所有節點型別實現。這個介面在js中的實現方法是Node類。
綜上，可以瞭解到，js中的所有節點型別，都來自與這個Node類，每個js中的節點都共用這個類的基本屬性和方法。
共有12種類型，使用NodeType屬性來表明節點的型別。
我們可以通過一些方法來判斷當前節點是哪種型別。
if(someNode.nodeType==Node.ELEMENT_NODE){
alert("匹配成功，此節點是ElEMENT型別");
}
注意：這種方法只在除IE的瀏覽器中適用，使用IE進行文件的解析時，我們是不能存取Node型別的，因爲在IE中，所有的DOM物件都是以COM物件實現的。存取的返回值只會是null。
那IE該怎麼辦呢，可以將NodeType型別與所有的節點型別常數的數位值來比較。
節點型別在Node型別中定義了12個數值常數表示，先來看看都有哪些型別以及他們的數值吧！
- 元素節點 Node.ELEMENT_NODE(1)
- 屬性節點 Node.ATTRIBUTE_NODE(2)
- 文字節點 Node.TEXT_NODE(3)
- CDATA節點 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)
- DTD宣告節點 Node.NOTATION_NODE(12)
針對於每個型別的說明，會在後面詳細展開，現在先來解決在IE中判定節點型別的問題。
將NodeType值與數位值直接進行比較即可。
if(someNode.nodeType==1){//適用於所有瀏覽器
alert("匹配成功，此節點是ElEMENT型別");
}
此時已經可以判斷節點的型別了，判斷節點型別是很重要的工作！！！！使用這個方法，也可以用來判斷其他的節點型別。
但是，要瞭解節點的具體資訊，就應該瞭解nodeName和nodeValue屬性。
nodeName、nodeType、nodeValue
NodeName中儲存的是節點的名稱。
NodeType中儲存的就是節點型別的常數值。
nodeValue屬性返回或設定當前節點的值，格式爲字串。例如id=」test」,這裏的nodeValue就是test。
-
12種節點型別概述
-
元素節點（element）
nodeType：值爲1。
nodeName：值爲元素的標籤名稱。
nodeValue：null。
注意：標籤名稱一定是大寫的，大小寫的區分在一些事件系結實現一些效果的時候，尤其重要。
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true
var d=document.getElementById('myDiv');
alert(d.tagName); // DIV,HTML中的標籤名全部爲大寫，XML中標籤名與原始碼一致
alert(d.nodeName==d.tagName); // true
console.log(d.nodeValue)//null
-
屬性節點（attribute）
nodeType：值爲2。
nodeName：值爲屬性名。
nodeValue：屬性的值，字串形式。
注意：屬性節點只存在於標籤的attributes屬性中，並不屬於DOM樹。
-
文字節點（text）
nodeType：值爲3。
nodeName：值爲」#text」。
nodeValue：標籤的內容值。
-
CDATA節點
nodeType：值爲4。
nodeName：值爲」#cdata-section」。
nodeValue：CDATA區域中的內容。
CDATA_SECTION型別的值只針對基於xml的文件，並在xml文件中表示CDATA區域
-
實體參照型別
nodeType：值爲5。
nodeName：值爲實體參照的名稱。
nodeValue：null。
- 什麼是實體參照？
html或xml在使用有特殊意義的符號時，所使用的程式碼。就是實體。一般格式：&+程式碼。
在使用html或xml時，當遇到一些有特殊意義的字元，例如」<」,此時解析器會將它當作一個新的標籤的開始而不是小於號，此時，就需要用到實體參照，防止解析出錯。
實體宣告是使用 <!ENTITY name "value"> 語法在文件型別定義(DTD)或XML架構中建立的。
其次，在實體宣告中定義的名稱隨後將在 XML 中使用。 在XML中使用時，該名稱稱爲實體參照。
//實體名稱
<!ENTITY publisher "Microsoft Press">
//實體名稱參照
<pubinfo>Published by &publisher;</pubinfo>//Published by Microsoft Press;
-
實體名稱節點
在上面的例子中，publisher在定義爲實體名稱時就是實體名稱節點，在後期被參照了，纔是參照名稱節點。
nodeType：值爲6。
nodeName：值爲實體的名稱。
nodeValue：null。
-
處理指令節點
nodeType：值爲7。
nodeName：值爲target。
nodeValue：entire content excluding the target。
-
註釋節點
nodeType：值爲8。
nodeName：#comment。
nodeValue：值爲html註釋標籤的內容。
-
文件節點（document）
文件節點表示整個文件，html文件的文件節點爲<html>，它指向document物件，也稱爲根節點，每個文件的文件節點只有一個。
nodeType：值爲9。
nodeName：#document。
nodeValue：null。
-
文件節點型別（document type）
文件節點型別包含着與文件doctype有關的資訊。
nodeType：值爲10。
nodeName：doctype的名稱。
nodeValue：null。
例如：<!DOCTYPE html>，它的nodeName是html。
-
文件片段節點
它在文件中並沒有對應的標記，在使用時，我們可以在js中先新建一個文件片段，此時就有文件片段了，關於文件片段的詳細內容，後期會追加更新，並在這裏追加鏈接~~
nodeType：值爲11。
nodeName：值爲「#document-fragment」。
nodeValue：null。
-
DTD宣告節點
DTD宣告節點notation代表DTD中宣告的符號。
nodeType：值爲12。
nodeName：值爲符號名稱。
nodeValue：null。
以上就是本文的所有內容了，有關每個節點型別的詳細描述以及Dom中相關函數的內容會在開其它的文章具體敘述~~~
歡迎大家的留言以及錯誤指正。