摘要：是針對(duì)和文檔的一個(gè)，描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)，允許開(kāi)發(fā)人員添加修改刪除節(jié)點(diǎn)的一部分。類型級(jí)定義了接口，該接口由中的所有節(jié)點(diǎn)類型實(shí)現(xiàn)。添加的這些屬性分別對(duì)應(yīng)于每個(gè)元素中都存在的下列標(biāo)準(zhǔn)特性。

DOM是針對(duì)HTML和XML文檔的一個(gè)API，描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)，允許開(kāi)發(fā)人員添加、修改、刪除節(jié)點(diǎn)的一部分。

DOM將HTML和XML文檔描繪成一個(gè)有多個(gè)節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)，節(jié)點(diǎn)分為12種不同的節(jié)點(diǎn)類型，每種都擁有自己的特點(diǎn)、數(shù)據(jù)和方法，并且和其他節(jié)點(diǎn)存在著某種關(guān)系。

html元素稱為文檔元素，所有的元素都包含在文檔元素中，并且每個(gè)文檔只有一個(gè)html元素。

DOM1級(jí)定義了Node接口，該接口由DOM中的所有節(jié)點(diǎn)類型實(shí)現(xiàn)。這個(gè)接口在JavaScript中是作為Node類型實(shí)現(xiàn)的。因此JavaScript中所有的節(jié)點(diǎn)類型都繼承Node類型，所有的類型都共享著相同的基本屬性和方法。

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)

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

由于IE沒(méi)有公開(kāi)構(gòu)造函數(shù)，因此上述代碼不能在IE中使用。所以為了確保跨瀏覽器的兼容性，判斷Node類型的方法如下：

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

可以利用nodeName和nodeValue屬性了解node的具體信息，這兩個(gè)值和節(jié)點(diǎn)的類型有關(guān)。

    if(someNode.nodeType == 1){
        value = someNode.nodeName;
        //對(duì)于元素節(jié)點(diǎn)，nodeName保存的是元素的標(biāo)簽名，nodeValue始終為null
    }

文檔中所有節(jié)點(diǎn)相互之間都有關(guān)系，包括父子關(guān)系，同胞關(guān)系。

每個(gè)節(jié)點(diǎn)都有childNodes屬性，保存著一個(gè)NodeList對(duì)象，NodeList是一種類數(shù)組的對(duì)象，可以使用childeNode[0]，childNode.item(1)來(lái)訪問(wèn)，同時(shí)擁有l(wèi)ength屬性，但并不是Array實(shí)例。

parentNode：指向文檔樹(shù)種的父節(jié)點(diǎn)

nextSibling：緊挨著當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)

previousSibling：緊挨著當(dāng)前節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)

firstChild：表現(xiàn)某一節(jié)點(diǎn)的第一個(gè)節(jié)點(diǎn)，childNodes[0]

lastChild：表示某一節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn),childeNodes[childNodes.length-1]

hasChildNodes()方法：判定一個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)，有返回true，沒(méi)有返回false

removeChild()方法：去除一個(gè)節(jié)點(diǎn)

appendChild()方法：添加一個(gè)節(jié)點(diǎn)，如果文檔樹(shù)中已經(jīng)存在該節(jié)點(diǎn)，則將它刪除，然后在新位置插入

replaceChild(node1，node2)方法：從文檔樹(shù)中刪除指定的節(jié)點(diǎn)node2，插入節(jié)點(diǎn)node1，被替換的節(jié)點(diǎn)仍然在文檔中，但是沒(méi)有位置

insertBefore(node1，node2)方法：在指定節(jié)點(diǎn)node2的前面插入節(jié)點(diǎn)node1，并返回node1.如果已經(jīng)存在，則刪除原來(lái)的，然后在新位置插入

cloneNode()方法復(fù)制一個(gè)節(jié)點(diǎn)，該方法有一個(gè)參數(shù)，true表示深復(fù)制，false表示淺復(fù)制。不會(huì)復(fù)制屬性，處理程序等。

document對(duì)象是HTMLDocument（繼承自Document類型）的一個(gè)實(shí)例，表示整個(gè)html頁(yè)面或其他基于xml的文檔。并且document是window對(duì)象的一個(gè)屬性，可以將其當(dāng)做全局對(duì)象來(lái)訪問(wèn)。

Document的子節(jié)點(diǎn)可以是DocumentType、Element、ProcessingInstructior或Comment，有兩個(gè)訪問(wèn)節(jié)點(diǎn)的快捷方式:

documentElement，該屬性一直指向頁(yè)面中的html元素。

childNodes，直接訪問(wèn)文檔元素。

document.body，直接指向body元素

doucment.doctype，取得標(biāo)簽的信息

文檔類型是只讀的，而且它只有一個(gè)元素節(jié)點(diǎn)，通常早已存在。

document對(duì)象有一些標(biāo)準(zhǔn)的Document對(duì)象所沒(méi)有的屬性，提供了 document對(duì)象所表現(xiàn)的網(wǎng)頁(yè)的一些信息。

    
    //取得文檔標(biāo)題
    var title = document.title;
    //設(shè)置文檔標(biāo)題
    document.title = "New page title";
    //取得完整的URL
    var url = document.URl;
    //取得域名
    var domain = document.domain;
    //取得來(lái)源頁(yè)面的URL
    var referrer = document.referrer;

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

Document類型提供兩個(gè)查找元素的方法:

getElementById(),如果找到相應(yīng)的元素則返回該元素，如果不存在帶有相應(yīng)ID的元素，則返回null。

getElementByTagName(),返回包含零或多個(gè)元素的NodeList，在HTMl文檔中，這個(gè)方法會(huì)返回一個(gè)HTMLCollection對(duì)象，與NodeList非常類似。其中THMLCollection對(duì)象有一個(gè)方法nameItem()

getElementsByName(),會(huì)返回帶有給定name特性的所有元素。

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

document.write()方法可以用在兩個(gè)方面：

頁(yè)面載入過(guò)程中用實(shí)時(shí)腳本創(chuàng)建頁(yè)面內(nèi)容

用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容

只有當(dāng)頁(yè)面被加載的時(shí)候document.write()函數(shù)才會(huì)被執(zhí)行

doucment.writeln()與上述類似，區(qū)別在于換行。
open()和close()分別用于打開(kāi)和關(guān)閉網(wǎng)頁(yè)的輸出流，如果在頁(yè)面加載期間使用write()，則不需要用這兩個(gè)方法。

Element類型用于表現(xiàn)XML或HTML元素，提供了對(duì)元素標(biāo)簽名、子節(jié)點(diǎn)及特性的訪問(wèn)。

所有的HTML元素都是有HTMLElement類型表示，HTMLElement類型直接繼承自ELement并添加一些屬性。添加的這些屬性分別對(duì)應(yīng)于每個(gè)HTML元素中都存在的下列標(biāo)準(zhǔn)特性。

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

getAttribute():用來(lái)獲取相應(yīng)元素或其內(nèi)容的附加信息，與上述獲取屬性基本一致，但是有兩點(diǎn)區(qū)別：

style，通過(guò)getAttribute()獲取的是CSS文本，通過(guò)屬性獲取的會(huì)返回一個(gè)對(duì)象。

onclick，getAttribute()獲取相應(yīng)代碼的字符串，屬性獲取則會(huì)返回一個(gè)JavaScript函數(shù)。

一般情況下，開(kāi)發(fā)人員最好使用對(duì)象的屬性，只要在取得自定義特征值的情況下，才會(huì)使用getAttribute()

setAttribute()：接收兩個(gè)參數(shù)，要設(shè)置的特性名和值，如果特性已經(jīng)存在，會(huì)修改特性值，如果不存在則會(huì)創(chuàng)建。

removeAttribute():用于徹底刪除元素的特性，IE6及之前的版本不支持此方法。

document.createElement()方法可以創(chuàng)建新元素，此方法只接收一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名（不區(qū)分大小）。

    //div創(chuàng)建插入過(guò)程 
    var div = document.createElement("div");
    div.id = "myNewDiv";
    div.className = "box";
    document.body.appendChild(div);