DOM 或文檔對象模型是 web 頁面上所有對象的根。它表示文檔的結構，並將頁面連接到編程語言。它的結構是一個邏輯樹。每個分支結束於一個節點，每個節點包含子節點、對象。
DOM API非常龐大，在本文中，咱們只討論比較常用有有用的那些API。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('廈門','北京') - ↓
- 廈門
- 北京
- 上海
- 深圳
1212 期間，原價 3000 多的配置的服務，只要 89每年，感覺好划算的,建議在購買阿里雲相關產品前先領取阿里雲2000代金券會更優惠哦。想了解一些前端的後臺知識及學習全棧的，可以識別瞭解詳情
Node.removeChild
Node.removeChild方法從DOM中刪除一個子節點並返回刪除的節點。 請注意，返回的節點不再是
DOM的一部分，而是仍存在於內存中。 如果處理不當，可能會導致內存洩漏。
Node.replaceChild
此方法替換父節點中的子節點(並返回替換後的舊子節點)。請注意，如果處理不當，此方法可能導致與Node.removeChild類似的內存洩漏問題。
Node.cloneNode
Node.cloneNode(deep) 方法返回調用該方法的節點的一個副本，deep(可選)表示是否採用深度克隆,如果為true,則該節點的所有後代節點也都會被克隆,如果為false,則只克隆該節點本身.
let list = document.querySelector('ul');
let clone = list.cloneNode();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樹中的字符串。
示例：
var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '總結
希望本文對你有所幫助，並且有助於你理解DOM。正確處理DOM樹非常重要，如果操作不正確，可能會導致嚴重後果。
原文：https://www.impressivewebs.com/10-essential-dom-methods-techniques-for-practical-javascript/
閱讀更多 前端小智 的文章
