文檔對象模型（Document Object Model，DOM）是一種抽象化表示網頁的方法，文檔是以樹形結構表示的。

Document節點分為父節點（parentNode）、子節點（childNode）、兄弟節點（siblingNode）等。

BOM（瀏覽器對象模型）因為沒有一個標準來定義瀏覽器的功能，所以不同的瀏覽器有不同的屬性和方法。DOM則不然，有專門定義HTML（或XML）頁面中的對象應該如何表示的標準。開發人員可以使用DOM操作或查找網頁中的某項內容，尤其是表單、圖片、定位元素。

1 查詢或訪問的方法

當HTML文檔加載完成后，瀏覽器將會將其表示成樹形結構，頁面上的所有元素都是對象樹中的對象。如JS在處理表單時，會根據其在文檔中出現的次序為所有表單創建一個數組。document.forms[0]用來表示第一個表單。同樣，頁面上所有的圖片、鏈接和錨點都會以其名字存儲在數組中，例如document.images、document.links、document.anchors[]等。

1.1 數組通過名字或索引

如文檔中有一個表單，名字是form1，那么就可以通過它的名字來訪問它，即document.forms[“form1”]，也可以使用索引值來訪問它，即document.forms[n].

1.2 通過document方法的name屬性

document.getElementByTagName();

1.3 通過document方法的ID屬性

document.getElementById();

2 DOM的修改

window.onload=function(){

var divObj = document.getElementById(“divtest”);

divObj.innerHTML = “Inserting new text in the div container!”;

}

3 DOM的追加

window.onload=function(){

var para = document.createElement(“p”);

var divObj = document.getElementById(“divtest”);

divObj.appendChild(para);

var txt = document.createTextNode(“Hope this work!”);

para.appendChild(txt);

}

4 DOM節點的插入

document.body.insertbefore(newPara, firstPara);

5 為DOM節點創建屬性

var headings = document.getElementsByTagName(“h4”);

headings[0].setAttribute(“id”, “firsth4”);

6 DOM的復制

newPara = oldPara.cloneNode(true);

7 DOM的刪除

parentDiv1.removeChild(div2);

補充：

document.write()方法

可以寫入全部的文檔代碼，包括HTML、CSS乃至JS。