DOM和DOM節點 · Web前端(打印用)

## DOM和DOM節點 ### 1.DOM > DOM是Javascript操作網頁的接口，全稱叫文檔對象模型（Document Object Model）。它的作用是將網頁轉化為一個Javascript對象，從而用Javascript腳本進行各種操作（比如增刪元素等）。 ### 2.DOM節點 DOM的最小組成單位就是節點（node）。DOM樹就是由不同類型的節點組成。每個節點可以看成是DOM樹上的葉子。在DOM中，節點的類型一共有7種 * Document：整個文檔樹的頂層節點； * DocumentType：dotype標簽比如：`<!DOCTYPE html>` * Element：網頁的各種HTML標簽比如：`<body> <h> <a> <div>` * Attribute：網頁元素的屬性比如：`id=”id” class=”class” type=”text”` * Text：標簽之間或標簽包含的文本 * Comment：注釋 * DocumentFragment：文檔片段 ### 3.節點樹一個文檔的所有節點，按照所在的層次，可以抽象成一個樹狀結構。這種樹狀結構就是DOM。最頂層的節點就是document類型的節點，它代表了整個文檔。文檔里面最高一層的HTML標簽，一般是`<html>`，它構成樹結構的根節點（root node），其他的Html標簽都是它的下級。 ![](https://box.kancloud.cn/a9d0a35ebc676b65f082c44a1e50904e_486x266.png) 除了根節點，其他節點對于周圍的幾點都存在3種關系 * 父節點關系（parentNode）：直接的那個上級節點 * 子節點關系（childNodes）：直接的下級節點 * 同級節點關系（sibling）：擁有同一父節點的節點 DOM提供操作接口，用來獲取三種關系的節點。獲取子節點：firstChild（第一個子節點）lastChild（最后一個子節點）等獲取同級別：nextSibling（緊鄰在后的同級節點）和previousSibling（緊鄰在前的同級節點）