search

4.4 認識 DOM

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

hashtag
DOM Tree

假設有一個 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：

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

hashtag
解析錯誤？

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

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

瀏覽器解析的結果，跟我們寫的不一樣，所以就代表我們寫錯了，需修正。

hashtag
DOM Scripting

我們所寫的 JavaScript，就是 DOM Scripting，就是用來操控 DOM Tree。

Previous4.3 認識時戳(Timestamp)Next4.5 DOM 取得節點、內容、屬性

Last updated