概述 · 學習講義 2019

## 一、DOM DOM 是 JavaScript 操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網頁轉為一個 JavaScript 對象，從而可以用腳本進行各種操作。瀏覽器會根據 DOM 模型，將結構化文檔（比如 HTML 和 XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。所有的節點和最終的樹狀結構，都有規范的對外接口。 DOM 只是一個接口規范，可以用各種語言實現。所以嚴格地說，DOM 不是 JavaScript 語法的一部分，但是 DOM 操作是 JavaScript 最常見的任務，離開了 DOM，JavaScript 就無法控制網頁。另一方面，JavaScript 也是最常用于 DOM 操作的語言。 ## 二、節點 DOM 的最小組成單位叫做節點（node）。文檔的樹形結構（DOM 樹），就是由各種不同類型的節點組成。每個節點可以看作是文檔樹的一片葉子。節點的類型有七種。 * `Document`：整個文檔樹的頂層節點 * `DocumentType`：`doctype`標簽（比如`<!DOCTYPE html>`） * `Element`：網頁的各種HTML標簽（比如`<body>`、`<a>`等） * `Attribute`：網頁元素的屬性（比如`class="right"`） * `Text`：標簽之間或標簽包含的文本 * `Comment`：注釋 * `DocumentFragment`：文檔的片段 ## 三、節點數一個文檔的所有節點，按照所在的層級，可以抽象成一種樹狀結構。這種樹狀結構就是 DOM 樹。它有一個頂層節點，下一層都是頂層節點的子節點，然后子節點又有自己的子節點，就這樣層層衍生出一個金字塔結構，倒過來就像一棵樹。瀏覽器原生提供`document`節點，代表整個文檔。文檔的第一層有兩個節點，第一個是文檔類型節點（`<!doctype html>`），第二個是 HTML 網頁的頂層容器標簽`<html>`。后者構成了樹結構的根節點（root node），其他 HTML 標簽節點都是它的下級節點。除了根節點，其他節點都有三種層級關系。 * 父節點關系（parentNode）：直接的那個上級節點 * 子節點關系（childNodes）：直接的下級節點 * 同級節點關系（sibling）：擁有同一個父節點的節點 DOM 提供操作接口，用來獲取這三種關系的節點。比如，子節點接口包括`firstChild`（第一個子節點）和`lastChild`（最后一個子節點）等屬性，同級節點接口包括`nextSibling`（緊鄰在后的那個同級節點）和`previousSibling`（緊鄰在前的那個同級節點）屬性。