剖析React內部運行機制-重溫DOM

HTML DOM（文檔對象模型）

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型DOM（Document Object Model）。經過HTML DOM，JavaScript 可以訪問和改變 HTML 文檔的全部元素（內容，結構和樣式）。

HTML DOM 是 HTML 的標準對象模型和編程接口。它定義了：

• 做爲對象的 HTML 元素
• 全部 HTML 元素的屬性
• 訪問全部 HTML 元素的方法
• 全部 HTML 元素的事件

HTML DOM 是關於如何獲取、更改、添加或刪除 HTML 元素的標準。

經過這個對象模型，JavaScript 得到建立動態 HTML 的全部力量：

• JavaScript 能改變頁面中的全部 HTML 元素
• JavaScript 能改變頁面中的全部 HTML 屬性
• JavaScript 能改變頁面中的全部 CSS 樣式
• JavaScript 能刪除已有的 HTML 元素和屬性
• JavaScript 能添加新的 HTML 元素和屬性
• JavaScript 能對頁面中全部已有的 HTML 事件做出反應
• JavaScript 能在頁面中建立新的 HTML 事件

DOM節點

W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點：

• 整個文檔是一個文檔節點
• 每一個 HTML 元素是元素節點
• HTML 元素內的文本是文本節點
• 每一個 HTML 屬性是屬性節點
• 註釋是註釋節點

---

nodeName 屬性

nodeName 屬性規定節點的名稱。

• nodeName 是隻讀的
• 元素節點的 nodeName 與標籤名相同
• 屬性節點的 nodeName 與屬性名相同
• 文本節點的 nodeName 始終是 #text
• 文檔節點的 nodeName 始終是 #document

注意：nodeName 始終包含 HTML 元素的大寫字母標籤名。

---

nodeValue 屬性

nodeValue 屬性規定節點的值。

• 元素節點的 nodeValue 是 undefined 或 null
• 文本節點的 nodeValue 是文本自己
• 屬性節點的 nodeValue 是屬性值

---

nodeType 屬性

nodeType 屬性返回節點的類型。nodeType 是隻讀的。

比較重要的節點類型有：

元素類型	nodeType
元素	1
屬性	2
文本	3
註釋	8
文檔	9

DOM 對象 - 經常使用方法和屬性

一些經常使用的 HTML DOM 方法：

• getElementById(id) - 獲取帶有指定 id 的節點（元素）
• appendChild(node) - 插入新的子節點（元素）
• removeChild(node) - 刪除子節點（元素）

一些經常使用的 HTML DOM 屬性：

• innerHTML - 節點（元素）的文本值
• parentNode - 節點（元素）的父節點
• childNodes - 節點（元素）的子節點
• attributes - 節點（元素）的屬性節點

DOM 節點(node)對象 - 實例

<div id="rootDiv">
    <ul id="items">
        <li id="item1">item1</li>
        <li id="item2">item2</li>
        <li id="item3">item3</li>
    </ul>
</div>
複製代碼

在Chrome瀏覽器控制檯使用下面命令

var rootDiv = document.getElementById('rootDiv');
// 這裏若是用console.log()不能輸出DOM節點對象結構
console.dir(rootDiv);
複製代碼

看下面輸出結果能夠獲知DOM節點對象包含了哪些屬性。

下面還有

把rootDivDOM節點的childNodes屬性的詳細展開以下

從上圖中咱們能夠獲知HTML文件中除了正常的標籤，一些「換行」符被解析成了DOM節點，類型爲text。

總結

這篇文章的內容很基礎，主要介紹了DOM領域一些比較重要的概念，咱們須要重點了解的是DOM節點對象都有哪些屬性好比nodeName，nodeValue，nodeType，childNodes等和方法尤爲是appendChild(node)。