什麼是 DOM？

概念介紹
#

DOM全名為 Document Object Model, 是瀏覽器把 HTML 文件轉換成的一種可以被 JavaScript 操作的樹狀結構。例如：

以下這種結果的 HTML 代碼：

<body>
  <h1>我是標題</h1>
  <p>這是一段文字</p>
</body>

就會產生這樣的 DOM:

<body>
  ├─ <h1>
  └─ <p>

這棵 DOM Tree 就是 JavaScript 能夠操作的對象。我們可以用它來查找、修改、刪除、增加畫面上的元素。

<button onclick="changeText()">點我！</button>

<script>
function changeText() {
  document.querySelector("button").innerText = "你點過我了！";
}
</script>