DOM常見的操作有哪些？

本文轉載自查看原文 2022-02-22 16:21 721 帶着問題去學習 / Javascript系列

一、DOM

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口

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

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

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

<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <p>Hello World!</p >
    </body>
</html>

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

<div>
    <p title="title">
        content
    </p >
</div>

上述結構中，div、p就是元素節點，content就是文本節點，title就是屬性節點

二、操作

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

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

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

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

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

創建節點

createElement

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

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

createTextNode

創建一個文本節點

const textEl = document.createTextNode("content");

createDocumentFragment

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

const fragment = document.createDocumentFragment();

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

createAttribute

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

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

獲取節點

querySelector

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

1 document.querySelector('.element')
2 document.querySelector('#element')
3 document.querySelector('div')
4 document.querySelector('[name="username"]')
5 document.querySelector('div + p > span')

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

querySelectorAll

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

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

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

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

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

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

更新節點

innerHTML

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

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

innerText、textContent

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

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

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