什麼是 DOM？

1月 18 2022 JavaScript

簡單快速。

解釋

全名為「文件物件模型（Document Object Model, DOM）」。

把重點放在 Object 就好，因為 DOM 就是用來把「Document」（例如 HTML）轉換成「Object」的一個模型：

例如有段 HTML：

<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <h1>A heading</h1>
  </body>
</html>

在 DOM 模型中大概就長這樣：

const document = {
  html: {
    head: {
      title: {
        text: 'My title'
      }
    },
    body: {
      h1: {
        text: 'A heading'
      }
    }
  },
  // 在 DOM 裡定義好的方法
  getElementById: function(id) {
    ...
  },
  // 在 DOM 裡定義好的方法
  querySelector: function(selector) {
    ...
  }
}

化成圖片：

dom

能做什麼？

讓我們可以透過 JavaScript 來存取 HTML 做一些操作，像是「改變畫面」之類的。

儘管寫的是 JavaScript 的語法但卻能操作 HTML。因此也可以把 DOM 想成是瀏覽器提供的一個「橋梁」，用 JavaScript 來跟瀏覽器溝通，透過 DOM 來告訴瀏覽器我們想對 HTML 做什麼。

什麼是 DOM？

解釋

能做什麼？

Your browser is out-of-date!