DOM對象概述
DOM是一套Web標準，它定義了訪問HTML文檔對象的一套屬性、方法和事件，DOM實際上是建立網頁與JavaScript語言溝通的橋梁。
對象模型結構
DOM的英文全稱是Document Object Model，即文檔對象模型。文檔一般是指HTML文檔，DOM對象模型將HTML文檔組織為以Node對象為節點的層次結構。一個節點是一個Node對象。Node對象按照節點類型分為元素節點、屬性節點、文本節點和注釋節點。
元素節點（也稱為元素對象）由元素節點、屬性節點、文本節點和注釋節點構成。
元素對象結構如下圖所示：
在DOM對象模型中，Document是文檔對象，通過Document對象可以獲取所有HTML文檔中的元素對象。Document對象結構如下圖所示：
瀏覽器在解析HTML文檔時，若遇到<body>標籤和<frame>，會自動創建Window對象，Windos對象是DOM對象模型中最頂層的對象，通過Windos對象可以獲取Document對象。
DOM對象層次結構
DOM最頂層是Window對象，Window對象下面是Document（文檔對象）、Navigator(瀏覽器對象)、Screen（屏幕對象）、History（瀏覽歷史對象）、Location（URL對象）。
DOM對象層次結構如下圖所示：
DOM對象的使用
應用DOM可以完整解析HTML網頁，DOM會在內存中構建一棵完整的解析樹，來實現對網頁文檔的動態訪問和操作，它把網頁所有的HTML元素都解析為樹上層次分明的節點，然後可以對這些節點進行添加、修改、刪除和查看等操作。
在DOM樹中，Window對象是樹的根節點，Document對象是Window的子節點，也可以說Window對象是Document對象的父節點。Winodw對象表示瀏覽器打開的窗口，它是一個全局對象，瀏覽器窗口內所有的計算和操作都在窗口環境中，因此Window對象的屬性也可以直接作為全局變量來使用。
例如：documet對象是Window對象的屬性，在JS函數中可以直接使用documet對象，而不必寫winodw.document。
同樣也可以把Window對象的方法作為全局函數來使用。例如：alert()方法是Window對象的方法，在JS函數內可以直接寫alert()，而不必寫window.alert()。
案例1：遞歸遍歷DOM節點
<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"> // 遞歸遍歷節點 function travel_node(node) { // 遍歷node所有子節點 for(var i = 0; i < node.childNodes.length; i++){ // 若節點是元素節點且子節點大於0 if(node.childNodes[i].nodeType == 1 && node.childNodes[i].childNodes.length > 0) { // 拼接節點名稱 tagName = "<" + node.childNodes[i].nodeName + ">" document.getElementById("text_info").innerText += tagName; // 遞歸遍歷子節點 travel_node(node.childNodes[i]) } } } function travel() { // document對象的documentElement屬性HTML元素的根節點 travel_node(document.documentElement) } </script></head><body><p>朝辭白帝彩雲間，</p><p>千裡江陵一日還。</p><p>兩岸猿聲啼不住，</p><p>輕舟已過萬重山。</p><p><span style=" margin-left:30px;" id="text_info"></span></p><input type="button" value="遍歷DOM元素" onclick="travel()"/></body></html>