深入瀏覽器Dom對象

一、DOM#

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的程式設計介面

它提供了對文檔的結構化的表述，並定義了一種方式可以使從程式中對該結構進行訪問，從而改變文檔的結構、樣式和內容

任何 HTML 或 XML 文檔都可以用 DOM 表示為一個由節點構成的層級結構

節點分很多類型，每種類型對應著文檔中不同的信息和（或）標記，也都有自己不同的特性、數據和方法，而且與其他類型有某種關係，如下所示：

<html>
    <head>
        <title>頁面</title>
    </head>
    <body>
        <p>你好，世界！</p >
    </body>
</html>

DOM 像原子包含著亞原子微粒那樣，也有很多類型的 DOM 節點包含著其他類型的節點。接下來我們先看看其中的三種：

<div>
    <p title="標題">
        內容
    </p >
</div>

上述結構中，div、p 就是元素節點，內容 就是文本節點，標題 就是屬性節點

二、操作#

日常前端開發，我們都離不開 DOM 操作

在以前，我們使用 Jquery、zepto 等庫來操作 DOM，之後在 vue、Angular、React 等框架出現後，我們通過操作數據來控制 DOM（絕大多數時候），越來越少的去直接操作 DOM

但這並不代表原生操作不重要。相反，DOM 操作才能有助於我們理解框架深層的內容

下面就來分析 DOM 常見的操作，主要分為：

創建節點
查詢節點
更新節點
添加節點
刪除節點

創建節點#

createElement#

創建新元素，接受一個參數，即要創建元素的標籤名

const divEl = document.createElement("div");

createTextNode#

創建一個文本節點

const textEl = document.createTextNode("內容");

createDocumentFragment#

用來創建一個文檔碎片，它表示一種輕量級的文檔，主要是用來存儲臨時節點，然後把文檔碎片的內容一次性添加到 DOM 中

const fragment = document.createDocumentFragment();

當請求把一個 DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment 本身，而是它的所有子孫節點

createAttribute#

創建屬性節點，可以是自定義屬性

const dataAttribute = document.createAttribute('custom');
console.log(dataAttribute);

獲取節點#

querySelector#

傳入任何有效的 css 選擇器，即可選中單個 DOM 元素（首個）：

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

如果頁面上沒有指定的元素時，返回 null

querySelectorAll#

返回一個包含節點子樹內所有與之相匹配的 Element 節點列表，如果沒有相匹配的，則返回一個空節點列表

const notLive = document.querySelectorAll("p");

需要注意的是，該方法返回的是一個 NodeList 的靜態實例，它是一個靜態的 “快照”，而非 “實時” 的查詢

關於獲取 DOM 元素的方法還有如下，就不一一述說

document.getElementById('id屬性值');返回擁有指定id的對象的引用
document.getElementsByClassName('class屬性值');返回擁有指定class的對象集合
document.getElementsByTagName('標籤名');返回擁有指定標籤名的對象集合
document.getElementsByName('name屬性值'); 返回擁有指定名稱的對象集合
document/element.querySelector('CSS選擇器');  僅返回第一個匹配的元素
document/element.querySelectorAll('CSS選擇器');   返回所有匹配的元素
document.documentElement;  獲取頁面中的HTML標籤
document.body; 獲取頁面中的BODY標籤
document.all[''];  獲取頁面中的所有元素節點的對象集合型

除此之外，每個 DOM 元素還有 parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling 屬性，關係圖如下圖所示

更新節點#

innerHTML#

不但可以修改一個 DOM 節點的文本內容，還可以直接通過 HTML 片段修改 DOM 節點內部的子樹

// 獲取<p id="p">...</p >
var p = document.getElementById('p');
// 設置文本為abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p >
// 設置HTML:
p.innerHTML = 'ABC <span style="color:red">紅色</span> XYZ';
// <p>...</p >的內部結構已修改

innerText、textContent#

自動對字符串進行 HTML 編碼，保證無法設置任何 HTML 標籤

// 獲取<p id="p-id">...</p >
var p = document.getElementById('p-id');
// 設置文本:
p.innerText = '<script>alert("嗨")</script>';
// HTML被自動編碼，無法設置一個<script>節點:
// <p id="p-id">&lt;script&gt;alert("嗨")&lt;/script&gt;</p >

兩者的區別在於讀取屬性時，innerText 不返回隱藏元素的文本，而 textContent 返回所有文本

style#

DOM 節點的 style 屬性對應所有的 CSS，可以直接獲取或設置。遇到 - 需要轉化為駝峰命名

// 獲取<p id="p-id">...</p >
const p = document.getElementById('p-id');
// 設置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 駝峰命名
p.style.paddingTop = '2em';

添加節點#

innerHTML#

如果這個 DOM 節點是空的，例如，<div></div>，那麼，直接使用 innerHTML = '<span>child</span>' 就可以修改 DOM 節點的內容，相當於添加了新的 DOM 節點

如果這個 DOM 節點不是空的，那就不能這麼做，因為 innerHTML 會直接替換掉原來的所有子節點

appendChild#

把一個子節點添加到父節點的最後一個子節點

舉個例子

<!-- HTML結構 -->
<p id="js">JavaScript</p >
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
</div>

添加一個 p 元素

const js = document.getElementById('js')
js.innerHTML = "JavaScript"
const list = document.getElementById('list');
list.appendChild(js);

現在 HTML 結構變成了下面

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
    <p id="js">JavaScript</p >  <!-- 添加元素 -->
</div>

上述代碼中，我們是獲取 DOM 元素後再進行添加操作，這個 js 節點是已經存在當前文檔樹中，因此這個節點首先會從原先的位置刪除，再插入到新的位置

如果動態添加新的節點，則先創建一個新的節點，然後插入到指定的位置

const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

insertBefore#

把子節點插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

子節點會插入到 referenceElement 之前

setAttribute#

在指定元素中添加一個屬性節點，如果元素中已有該屬性改變屬性值

const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一個參數屬性名，第二個參數屬性值。

刪除節點#

刪除一個節點，首先要獲得該節點本身以及它的父節點，然後，調用父節點的 removeChild 把自己刪掉

// 拿到待刪除節點:
const self = document.getElementById('to-be-removed');
// 拿到父節點:
const parent = self.parentElement;
// 刪除:
const removed = parent.removeChild(self);
removed === self; // true

刪除後的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置