---
tags: HTML
---
# Document Object Model (DOM)

W3C 定義出來的規則，讓瀏覽器的大大們可以按照這個規則去設計瀏覽器。

> Document Object Model 的歷史可以追溯至 1990 年代後期微軟與 Netscape 的「**瀏覽器大戰**」（browser wars），雙方為了在 JavaScript 與 JScript 一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既 VBScript、ActiveX、以及微軟自家的 DHTML 格式等，使**不少網頁使用非微軟平台及瀏覽器無法正常顯示**。DOM 即是當時醞釀出來的傑作。
>
> ⎯⎯ [Document Object Model / Wiki](https://zh.wikipedia.org/wiki/%E6%96%87%E6%A1%A3%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B)

簡單來說就是**把 HTML 內的各個標籤定義成物件**，而瀏覽器會把 HTML 解析成一棵 DOM tree。


Node 可以分成 `Document` 、 `Element` 、 `Text` 、 `Attribute` 。

## Document

指這份**網站文件**，萬站皆由 Document 起。

## Element

指文件內的**各個標籤**，像是各種 HTML tag。

## Text

**Element 內的文字**，不解釋。

## Attribute

**Element 的相關屬性**，例如 `id` 、 `href` 等。

## HTMLCollection

Element 的集合。

## Nodelist

Node 的集合。