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對象有一個方法namedItem()
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);