search

4.1 DOM 簡介

DOM = Document Object Model，中文即「文件物件模型」。

hashtag
DOM tree

建立 practice/dom.html 檔案，內容如下：

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <article>
      <p><a href="#">這是連結</a></p>
      <p>另一個段落</p>
      <ul>
        <li>項目一</li>
        <li>項目二</li>
        <li>項目三</li>
      </ul>
    </article>
  </body>
</html>

瀏覽器解析以上 html 後，產出的 DOM tree：

DOM Tree

用瀏覽器開啟檔案，按下 Cmd + Option + i 或 F12，如下圖的 Elements 頁籤，展開看看，這就是瀏覽器將你寫的 html 解析出來的 DOM Tree：

Elements 頁籤

hashtag
解析錯誤？

試著加上以下的原始碼(可放在 </body> 之前)：

再到上述提的 Elements 頁籤觀察看看，出了什麼問題？

hashtag
DOM Scripting 簡介

javascript 本身並沒有 window、document 這種物件，這是瀏覽器解析完之後，提供給開發人員使用的，例如：

window.alert

document.getElementById

document.setAttribute

document.getAttribute

以上這些其實都是 DOM Scripting，參考書籍arrow-up-right。

Previous4. 文件物件模型 (DOM)Next4.2 取得節點、內容、屬性

Last updated