JavaScript中DOM的層次節點（一）

DOM是針對HTML和XML文檔的一個API，描繪了一個層次化的節點樹，容許開發人員添加、修改、刪除節點的一部分。

DOM將HTML和XML文檔描繪成一個有多個節點構成的結構，節點分爲12種不一樣的節點類型，每種都擁有本身的特色、數據和方法，而且和其餘節點存在着某種關係。

html元素稱爲文檔元素，全部的元素都包含在文檔元素中，而且每一個文檔只有一個html元素。

1 Node類型

DOM1級定義了Node接口，該接口由DOM中的全部節點類型實現。這個接口在JavaScript中是做爲Node類型實現的。所以JavaScript中全部的節點類型都繼承Node類型，全部的類型都共享着相同的基本屬性和方法。

1. Node.ELEMENT_NODE (1)

2. Node.ATTRIBUTE_NODE (2)

3. Node.TEXT_NODE (3)

4. Node.CDATA_SECTION_NODE (4)

5. Node.ENTITY_REFERENCE_NODE(5)

6. Node.ENTITY_NODE (6)

7. Node.PROCESSING_INSTRUCTION_NODE (7)

8. Node.COMMENT_NODE (8)

9. Node.DOCUMENT_NODE (9)

10. Node.DOCUMENT_TYPE_NODE (10)

11. Node.DOCUMENT_FRAGMENT_NODE (11)
12. Node.NOTATION_NODE (12)

因爲IE沒有公開構造函數，所以上述代碼不能在IE中使用。因此爲了確保跨瀏覽器的兼容性，判斷Node類型的方法以下：

if(someNode.nodeType == 1){
        alert("this is a element node!");
    }

1.1 nodeName和nodeValue

能夠利用nodeName和nodeValue屬性瞭解node的具體信息，這兩個值和節點的類型有關。

if(someNode.nodeType == 1){
        value = someNode.nodeName;
        //對於元素節點，nodeName保存的是元素的標籤名，nodeValue始終爲null
    }

1.2 節點關係

文檔中全部節點相互之間都有關係，包括父子關係，同胞關係。

每一個節點都有childNodes屬性，保存着一個NodeList對象，NodeList是一種類數組的對象，可使用childeNode[0]，childNode.item(1)來訪問，同時擁有length屬性，但並非Array實例。

• parentNode：指向文檔樹種的父節點

• nextSibling：緊挨着當前節點的下一個節點

• previousSibling：緊挨着當前節點的上一個節點

• firstChild：表現某一節點的第一個節點，childNodes[0]

• lastChild：表示某一節點的最後一個子節點,childeNodes[childNodes.length-1]

1.3 節點操做

• hasChildNodes()方法：斷定一個節點是否有子節點，有返回true，沒有返回false

• removeChild()方法：去除一個節點

• appendChild()方法：添加一個節點，若是文檔樹中已經存在該節點，則將它刪除，而後在新位置插入

• replaceChild(node1，node2)方法：從文檔樹中刪除指定的節點node2，插入節點node1，被替換的節點仍然在文檔中，可是沒有位置

• insertBefore(node1，node2)方法：在指定節點node2的前面插入節點node1，並返回node1.若是已經存在，則刪除原來的，而後在新位置插入

• cloneNode()方法複製一個節點，該方法有一個參數，true表示深複製，false表示淺複製。不會複製屬性，處理程序等。

2 Doucument類型

document對象是HTMLDocument（繼承自Document類型）的一個實例，表示整個html頁面或其餘基於xml的文檔。而且document是window對象的一個屬性，能夠將其當作全局對象來訪問。

類型	值
nodeType	9
nodeName	#document
nodeValue	null
parentNode	null

2.1 文檔子節點

Document的子節點能夠是DocumentType、Element、ProcessingInstructior或Comment，有兩個訪問節點的快捷方式:

• documentElement，該屬性一直指向頁面中的html元素。

• childNodes，直接訪問文檔元素。

• document.body，直接指向body元素

• doucment.doctype，取得標籤<!DOCTYPE>的信息

文檔類型是隻讀的，並且它只有一個元素節點，一般早已存在。

2.2 文檔信息

document對象有一些標準的Document對象所沒有的屬性，提供了 document對象所表現的網頁的一些信息。

//取得文檔標題
    var title = document.title;
    //設置文檔標題
    document.title = "New page title";
    //取得完整的URL
    var url = document.URl;
    //取得域名
    var domain = document.domain;
    //取得來源頁面的URL
    var referrer = document.referrer;

    document.bgColor //設置頁面背景色
    document.fgColor //設置前景色(文本顏色)
    document.linkColor //未點擊過的連接顏色
    document.alinkColor //激活連接(焦點在此連接上)的顏色
    document.vlinkColor //已點擊過的連接顏色
    document.fileCreatedDate //文件創建日期，只讀屬性
    document.fileModifiedDate //文件修改日期，只讀屬性
    document.fileSize //文件大小，只讀屬性
    document.cookie //設置和讀出cookie
    document.charset //設置字符集 簡體中文:gb2312
    
    
    document.body //指定文檔主體的開始和結束等價於body>/body>
    document.body.bgColor //設置或獲取對象後面的背景顏色
    document.body.link //未點擊過的連接顏色
    document.body.alink //激活連接(焦點在此連接上)的顏色
    document.body.vlink //已點擊過的連接顏色
    document.body.text //文本色
    document.body.innerText //設置body>.../body>之間的文本
    document.body.innerHTML //設置body>.../body>之間的HTML代碼
    document.body.topMargin //頁面上邊距
    document.body.leftMargin //頁面左邊距
    document.body.rightMargin //頁面右邊距
    document.body.bottomMargin //頁面下邊距
    document.body.background //背景圖片

2.3 查找元素

Document類型提供兩個查找元素的方法:

1. getElementById(),若是找到相應的元素則返回該元素，若是不存在帶有相應ID的元素，則返回null。

2. getElementByTagName(),返回包含零或多個元素的NodeList，在HTMl文檔中，這個方法會返回一個HTMLCollection對象，與NodeList很是相似。其中THMLCollection對象有一個方法nameItem()

3. getElementsByName(),會返回帶有給定name特性的全部元素。

var images = document.getElementsByTagName("img");
    alert(images.length);//輸出圖像的數量
    alert(images[0].src);//輸出第一個圖像元素的src特性
    alert(images.item(0).src);//輸出第一個圖像元素的src特性
    
    //根據name獲取單個相片
    var myImage = images.namedItem("myImage");
        myImage = images["myImage"];

2.4 文檔寫入

document.write()方法能夠用在兩個方面：

1. 頁面載入過程當中用實時腳本建立頁面內容

2. 用延時腳本建立本窗口或新窗口的內容

只有當頁面被加載的時候document.write()函數纔會被執行

doucment.writeln()與上述相似，區別在於換行。
open()和close()分別用於打開和關閉網頁的輸出流，若是在頁面加載期間使用write()，則不須要用這兩個方法。

3 Element類型

Element類型用於表現XML或HTML元素，提供了對元素標籤名、子節點及特性的訪問。

類型	值
nodeType	1
nodeName	元素的簽名
nodeValue	null
parentNode	Documnet或Element

3.1 HTML元素

全部的HTML元素都是有HTMLElement類型表示，HTMLElement類型直接繼承自ELement並添加一些屬性。添加的這些屬性分別對應於每一個HTML元素中都存在的下列標準特性。

var div = document.getElementById("myDiv");
    
    //能夠獲取和設置屬性的值
    alert(div.id);
    alert(div.className);
    alert(div.title);
    alert(div.lang);
    alert(div.dir); //獲取元素的文字方向

3.2 操做特性

getAttribute():用來獲取相應元素或其內容的附加信息，與上述獲取屬性基本一致，可是有兩點區別：

1. style，經過getAttribute()獲取的是CSS文本，經過屬性獲取的會返回一個對象。

2. onclick，getAttribute()獲取相應代碼的字符串，屬性獲取則會返回一個JavaScript函數。

通常狀況下，開發人員最好使用對象的屬性，只要在取得自定義特徵值的狀況下，纔會使用getAttribute()

setAttribute()：接收兩個參數，要設置的特性名和值，若是特性已經存在，會修改特性值，若是不存在則會建立。

removeAttribute():用於完全刪除元素的特性，IE6及以前的版本不支持此方法。

3.3 建立元素

document.createElement()方法能夠建立新元素，此方法只接收一個參數，即要建立元素的標籤名（不區分大小）。

//div建立插入過程 
    var div = document.createElement("div");
    div.id = "myNewDiv";
    div.className = "box";
    document.body.appendChild(div);