劍指前端（前端入門筆記系列）——DOM（基本組成與操作）

DOM——基本組成與操作 DOM——基本組成與操作 DOM是針對HTML和XML文檔的一個API（應用程式編程介面）。DOM描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。他給文檔提供了一種結構化的表達方式，可以改變文檔的內容和呈現方式，我們最關心的是，DOM把網頁和腳本以及其 ...

DOM——基本組成與操作 　　DOM是針對HTML和XML文檔的一個API（應用程式編程介面）。DOM描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。他給文檔提供了一種結構化的表達方式，可以改變文檔的內容和呈現方式，我們最關心的是，DOM把網頁和腳本以及其他的編程語言聯繫了起來。所謂的DOM是以家族的形式描述HTML（父子節點和兄弟節點），那麼，什麼是DOM呢？我們可以從這幾點解析一下：

DOM是document Object Model的縮寫，簡稱文檔對象模型（文檔、模型）。這個對象就是document

DOM的結構（頁面的結構）：樹狀結構，家族結構

DOM的組成（成員）：節點

DOM是js操作頁面的一個入口對象

DOM可以將任何HTML和XML文檔描繪成一個多層節點構成的結構

DOM結構中的每一個成分稱為一個節點，節點分為幾種不同的類型，每種類型都擁有各自不同的特點、數據和方法。每個節點與其他節點存在某種關係，所以節點之間的關係構成了層次。文檔節點是每個文檔的根節點。<html>元素是文檔節點的子節點，被稱為文檔元素，每個文檔只能有一個文檔元素

每一段標記都可以通過樹中的一個節點來表示：元素通過元素節點來表示，特性通過特性通過特性節點來表示，文檔通過文檔節點來表示，而註釋通過註釋節點來表示，總能共有十二種類型，這些類型都繼承自一個基類型。

HTML中，文檔元素始終是<html>元素

XML中，沒有預定義的元素，因此任何元素都可能成為文檔元素

Node類型 　　Dom定義了一個Node介面，該介面由DOM中的所有節點類型實現，這個Node介面在JavaScript中是作為Node類型來實現的；除了IE以外，在其他所有瀏覽器中都可以訪問到這個類型。JavaScript中的所有節點類型都繼承自Node類型，因此所有節點都共用著相同的基本屬性和方法。常量每個節點都有一個nodeType屬性，用於表明節點類型。節點類型由在Node類型中定義的下列12個數值常量來表示：

Node.ELEMENT_NODE 　　 //元素節點對應的常量，對應數字值1
Node.ATTRIBUTE_NODE 　　　　 //屬性節點對應的常量，對應數字值2
Node.TEXT_NODE 　　 //文本節點對應的常量，對應數字值3
Node.CDATA_SECTION_NODE 　　 //CDATA區段對應的常量，對應數字值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 　　 //<!DOCTYPE………..>對應的常量，對應數字值10
Node.DOCUMENT_FRAGMENT_NODE 　　 //文檔碎片節點對應的常量，對應數字值11
Node.NOTATION_NODE 　　 //DTD 中聲明的符號節點對應的常量，對應數字值12

屬性

自身信息

nodeType屬性（節點的類型） 因為nodeType屬性有兩種值，所以確定節點的類型有兩種方式：第一種是直接通過對應的常量進行比較判斷，但在IE中無效：

<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById("box");
if(oBox.nodeType == Node.ELEMENT_NODE){
    console.log("元素節點");
}else {
    console.log("不是元素節點");
}
</script>

第二種是通過對應的數字值進行比較判斷，這種方式適用於所有瀏覽器：

<div id="box"></div>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    if(oBox.nodeType == 1){
        console.log("元素節點");
    }else {
        console.log("不是元素節點");
    }
</script>

也就是常量和數字值是可以互換的，只不過數字值可以相容各個瀏覽器。 nodeName（節點名字）、nodeValue（節點值） 要瞭解節點的具體信息，可以使用這兩個屬性。這兩個屬性完全取決於節點的類型。下麵列出一些基本的對照表。

節點關係

　　文檔中的節點之間都存在這樣或那樣的關係，文檔樹就好比族譜，存在父子關係和兄弟關係。因為其他節點不能起名字（id、class之類的），所有節點中只有元素節點可以被直接獲取，其他種類的節點只能通過獲取到的元素節點間接獲取，而節點關係就是完成這個操作的利器。

- 父子關係

childNode屬性（執父索子） 　　該屬性中保存著一個NodeList對象。這是一個類數組對象，用於保存一組有序的節點，說是類數組，那麼裡面的元素當然是用數組的方式來讀取，而且它也有一個length屬性，但它並不能稱為一個真正的Array實例。下麵的例子展示瞭如何訪問保存在NodeList中的節點——可以通過方括弧，也可以通過item()方法。當然，因為索引訪問的方式類似於數組，所以開發人員更青睞於方括弧來獲取。

<div id="box">
    <p>段落1</p>
    <p>段落2</p>
    <!--註釋123-->
    <p>段落3</p>
</div>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    var firstChild_1 = oBox.childNodes[0];
    var firstChild_2 = oBox.firstChild;
    var firstChild_3 = oBox.childNodes.item(0);
    var lastChild = oBox.lastChild;

    var count = oBox.childNodes.length;
    console.log("所有子節點：" , oBox.childNodes);
    console.log("第一個子節點：" , firstChild_1);
    console.log("第一個子節點：" , firstChild_2);
    console.log("第一個子節點：" , firstChild_3);
    console.log("最後一個子節點：" , lastChild);
    console.log("子節點的數量：" , count);
</script>

　　這個類數組會把空格和換行當成文本節點保存起來，所以除去三個段落標簽和一個註釋標簽，它還保存了五個由空格和換行組成的文本節點。這個例子是在一個節點有子節點的情況下，所以有必要提供一個檢測函數hasChildNodes()來判斷一個節點是否有子節點，如果有的話，它返回true，反之為false，這比查詢childNodes列表的length屬性有效多了。 parentNode屬性（執子索父） 我們都知道一個父親可以有多個親生兒子，但是兒子卻只能有一個親生父親。所以childNode屬性返回的是一個包含了多個節點的類數組，而parentNode屬性只返回一個節點。

<div id="box">
    <p class="p1">段落1</p>
    <p>段落2</p>
    <!--註釋123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var oP= document.getElementsByClassName("p1")[0];
    var parent = oP.parentNode;
    console.log("父節點為：" , parent);
</script>

- 兄弟關係

除了操作父子關係用到的屬性，每個節點還提供了操作兄弟關係的屬性。 previousSibling屬性（前一個兄弟節點）、nextSibling屬性（後一個兄弟節點）

<div id="box">
    <p class="p1">段落1</p>
    <span></span>
    <h1>段落2</h1>
    <!--註釋123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var oP= document.getElementsByClassName("p1")[0];
    var preSibling = oP.previousSibling;
    var nextSibling = oP.nextSibling;
    console.log("前一個兄弟節點為：" , preSibling);
    console.log("後一個兄弟節點為：" , nextSibling);
</script>