作者：Milos Protic
譯者：前端小智
來(lái)源：impressivewebs.
DOM 或文檔對(duì)象模型是 web 頁(yè)面上所有對(duì)象的根。它表示文檔的結(jié)構(gòu)，并將頁(yè)面連接到編程語(yǔ)言。它的結(jié)構(gòu)是一個(gè)邏輯樹(shù)。每個(gè)分支結(jié)束于一個(gè)節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)包含子節(jié)點(diǎn)、對(duì)象。DOM API非常龐大，在本文中，咱們只討論比較常用有有用的那些API。
document.querySelector & document.querySelectorAll
document.querySelector方法返回文檔中與指定選擇器或選擇器組匹配的第一個(gè) html 元素。 如果找不到匹配項(xiàng)，則返回null。
document.querySelectorAll 方法返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優(yōu)先的先序遍歷文檔的節(jié)點(diǎn))。返回的對(duì)象是 NodeList 。
document.createElement
在一個(gè) HTML 文檔中， Document.createElement(tagName) 方法創(chuàng)建由 tagName 指定的 HTML 元素，或一個(gè)HTMLUnknownElement，如果tagName不被識(shí)別。
Node.AppendChild
Node.appendChild()方法將節(jié)點(diǎn)添加到給定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾。 請(qǐng)注意，如果給定的子代是文檔中現(xiàn)有節(jié)點(diǎn)的引用，則它將移動(dòng)到新位置。看看示例：
Node.insertBefore
此方法在給定的父節(jié)點(diǎn)內(nèi)的子引用節(jié)點(diǎn)之前插入給定節(jié)點(diǎn)（并返回插入的節(jié)點(diǎn)）
偽代碼如下所示：
- 北京
- 上海
- 深圳
- ↓
Node.insertBefore('廈門(mén)','北京') - ↓
- 廈門(mén)
- 北京
- 上海
- 深圳
Node.removeChild
Node.removeChild方法從DOM中刪除一個(gè)子節(jié)點(diǎn)并返回刪除的節(jié)點(diǎn)。 請(qǐng)注意，返回的節(jié)點(diǎn)不再是DOM的一部分，而是仍存在于內(nèi)存中。 如果處理不當(dāng)，可能會(huì)導(dǎo)致內(nèi)存泄漏。
Node.replaceChild
此方法替換父節(jié)點(diǎn)中的子節(jié)點(diǎn)(并返回替換后的舊子節(jié)點(diǎn))。請(qǐng)注意，如果處理不當(dāng)，此方法可能導(dǎo)致與Node.removeChild類似的內(nèi)存泄漏問(wèn)題。
Node.cloneNode
Node.cloneNode(deep) 方法返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本，deep(可選)表示是否采用深度克隆,如果為true,則該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也都會(huì)被克隆,如果為false,則只克隆該節(jié)點(diǎn)本身.
let list = document.querySelector('ul');
let clone = list.cloneNode();
Element.getAttribute / Element.setAttribute
Element.getAttribute方法返回元素上給定屬性的值，反之亦然，Element.setAttribute設(shè)置給定元素上屬性的值。
Element.hasAttribute / Element.removeAttribute
Element.hasAttribute方法檢查給定元素是否具有指定的屬性，返回值為boolean。 通過(guò)調(diào)用Element.removeAttribute方法，我們可以從元素中刪除具有給定名稱的屬性。
Element.insertAdjacentHTML
element.insertAdjacentHTML(position, text) 將指定的文本解析為HTML或XML，并將結(jié)果節(jié)點(diǎn)插入到DOM樹(shù)中的指定位置。它不會(huì)重新解析它正在使用的元素，因此它不會(huì)破壞元素內(nèi)的現(xiàn)有元素。這避免了額外的序列化步驟，使其比直接innerHTML操作更快。
position是相對(duì)于元素的位置，并且必須是以下字符串之一：
beforebegin：元素自身的前面。
afterbegin：插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)之前。
beforeend：插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后。
afterend：元素自身的后面。
text是要被解析為HTML或XML,并插入到DOM樹(shù)中的字符串。
示例：
var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');
總結(jié)
希望本文對(duì)你有所幫助，并且有助于你理解DOM。正確處理DOM樹(shù)非常重要，如果操作不正確，可能會(huì)導(dǎo)致嚴(yán)重后果。
原文：https://www.impressivewebs.com/10-essential-dom-methods-techniques-for-practical-JAVAscript/
