JavaScript存取文件物件模型(Document Object Model)

使用文件物件模型(Document Object Model，縮寫為DOM)可以讓JavaScript存取網頁內所有元素，當瀏覽器載入網頁時，會自動建立網頁的DOM，如下圖，左側是網頁，右側是對應的DOM，可以發現DOM是有階層的概念，將網頁中的元件轉換成樹狀結構，這樣的概念用於JavaScript對DOM的存取。透過JavaScript與DOM可以搜尋、新增、刪除網頁中元素，可以修改元素的CSS，增加JavaScript動態修改網頁的能力。

DOM元素的常用屬性與方法

DOM模型中元素的節點分成元素節點、文字節點與屬性節點，各種標籤都是元素節點，可以顯示在瀏覽器上的文字稱作文字節點，設定元素節點的屬性稱作屬性節點。例如：「<p id="result">在此顯示結果</p>」，p為元素節點，「在此顯示結果」為文字節點，與「id="result"」為屬性節點。元素節點的nodeType為1，屬性節點的nodeType為2，文字節點的nodeType為3。

DOM提供可以操作元素的屬性與方法，以下介紹常用的功能。

以下範例介紹如何使用DOM的屬性與方法讀取網頁的內容。

元素節點、文字節點與屬性節點範例

以下範例讀取網頁的元素節點、文字節點與屬性節點，讀取節點的nodeType、nodeName與nodeValue進行驗證。

本單元範例程式如下。

本單元範例程式劉覽結果如下，點選「找出所有li」下方顯示所有標籤li的結果。網頁預覽結果如下，menu下有七個li，第一個li的HTML為「<li>台北市景點…</li>」，所以li[0].nodeType為「1」，表示為元素節點，對應的li[0].nodeName為「LI」，接著找出該元素節點的第一個小孩的nodeType(li[0].childNodes[0].nodeType)結果顯示為「3」，表示為文字節點，接著顯示該文字節點的文字(li[0].childNodes[0].nodeValue)結果顯示為「台北市景點」，這就是為什麼顯示結果的第一行是「1 LI 3 台北市景點」，第二個li的HTML為「<li>台北101</li>」，所以li[1].nodeType為「1」，表示為元素節點，對應的li[1].nodeName為「LI」，接著找出該元素節點的第一個小孩的nodeType(li[1].childNodes[0].nodeType)結果顯示為「3」，表示為文字節點，接著顯示該文字節點的文字(li[1].childNodes[0].nodeValue)結果顯示為「台北101」，這就是為什麼顯示結果的第二行是「1 LI 3 台北101」，依此類推其他五個標籤li的結果。最後變數menu的屬性title的nodeType(menu.attributes["title"].nodeType)結果顯示為「2」，表示為屬性節點，接著顯示變數menu的屬性title的屬性值(menu.getAttribute("title"))結果顯示為「旅遊景點」，這就是為什麼顯示結果的第後一行是「2 旅遊景點」。