DOM操作在web頁面編程中是非常重要的。現在已有很多經過封裝的三方模塊，如JQuery等，可以很方便的操作DOM，但是，做為一名開發者，還是非常有必要知道原生JS是如何操作DOM的，這樣可以提升自己的編程能力，並可以猜測或理解三方模塊是如何封裝的，甚至可以實現自己的封裝模塊。

那麼，本文將介紹大家一些原生JS操作DOM的方式。

document.querySelector & document.querySelectorAll

document.querySelector方法返回文檔中與指定選擇器或選擇器組匹配的第一個 html 元素。 如果找不到匹配項，則返回null。

document.querySelectorAll 方法返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優先的先序遍歷文檔的節點)。返回的對象是 NodeList 。

document.createElement

在一個 HTML 文檔中， Document.createElement(tagName) 方法創建由 tagName 指定的 HTML 元素，或一個HTMLUnknownElement，如果tagName不被識別。

Node.appendChild

Node.appendChild()方法將節點添加到給定父節點的子節點列表的末尾。 請注意，如果給定的子代是文檔中現有節點的引用，則它將移動到新位置。看看示例：

Node.insertBefore

此方法在給定的父節點內的子引用節點之前插入給定節點（並返回插入的節點）

偽代碼如下所示：

深圳

↓

Node.insertBefore('廈門','北京')

↓

廈門

Node.removeChild

Node.removeChild方法從DOM中刪除一個子節點並返回刪除的節點。 請注意，返回的節點不再是DOM的一部分，而是仍存在於內存中。 如果處理不當，可能會導致內存洩漏。

Node.replaceChild

此方法替換父節點中的子節點(並返回替換後的舊子節點)。請注意，如果處理不當，此方法可能導致與Node.removeChild類似的內存洩漏問題。

Node.cloneNode

Node.cloneNode(deep) 方法返回調用該方法的節點的一個副本，deep(可選)表示是否採用深度克隆,如果為true,則該節點的所有後代節點也都會被克隆,如果為false,則只克隆該節點本身.

<code>let list = document.querySelector('ul');
let clone = list.cloneNode();/<code>

Element.getAttribute / Element.setAttribute

Element.getAttribute方法返回元素上給定屬性的值，反之亦然，Element.setAttribute設置給定元素上屬性的值。

Element.hasAttribute / Element.removeAttribute

Element.hasAttribute方法檢查給定元素是否具有指定的屬性，返回值為boolean。 通過調用Element.removeAttribute方法，我們可以從元素中刪除具有給定名稱的屬性。

Element.insertAdjacentHTML

element.insertAdjacentHTML(position, text) 將指定的文本解析為HTML或XML，並將結果節點插入到DOM樹中的指定位置。它不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素。這避免了額外的序列化步驟，使其比直接innerHTML操作更快。

position是相對於元素的位置，並且必須是以下字符串之一：

beforebegin：元素自身的前面。afterbegin：插入元素內部的第一個子節點之前。beforeend：插入元素內部的最後一個子節點之後。afterend：元素自身的後面。

text是要被解析為HTML或XML,並插入到DOM樹中的字符串。

示例：

<code>var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '
First
');/<code>

總結

瞭解這些JS對DOM操作的方法後，如果願意，我們可以實現一個類似JQuery的模塊，可以公開發布給大家用。或者可以封裝一個自己私有的模塊，方便自己的日常工作，如果擔心邏輯或代碼洩露，你還可以用JShaman之類的平臺對自己的代碼進行混淆加密。

閱讀更多 WangLiwen 的文章

關鍵字: 深圳 封裝 XML