[譯]13 種有用的 JavaScript DOM 操做

• 原文地址：13 JavaScript Methods Useful For DOM Manipulation
• 原文做者：Milos Protic
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：fireairforce
• 校對者：ZavierTang, smilemuffie

介紹

DOM（Document Object Model）是網頁上全部對象的基礎。它描述文檔的結構，而且爲編程語言提供操做頁面的接口。它被構形成邏輯樹。每一個分支以節點結束，每一個節點包含有子節點。DOM API 有不少，在本文裏面，我僅介紹一些我認爲最有用的 API。

document.querySelector / document.querySelectorAll

document.querySelector 方法返回文檔中與給定選擇器組匹配的第一個元素。

document.querySelectorAll 返回與給定選擇器組匹配的文檔中的元素列表。

// 返回第一個元素
const list = document.querySelector('ul');
// 返回全部類名爲 intro 或 warning 的 div 元素
const elements = document.querySelectorAll('div.info, div.warning');
複製代碼

document.createElement

這個方法會經過給定的標籤名稱來建立一個 HTMLElement。返回值是新建立的元素。

Node.appendChild

Node.appendChild() 這個方法可以將節點添加到給定父節點的子節點列表的末尾。請注意，若是給定要添加的子節點是文檔中現有節點的引用，則它將會被移動到子節點列表的末尾。

讓咱們看看這兩種方法的做用：

let list = document.createElement('ul'); // 建立一個新的 ul 元素
['Paris', 'London', 'New York'].forEach(city => {
    let listItem = document.createElement('li');
    listItem.innerText = city;
    list.appendChild(listItem);
});
document.body.appendChild(list);
複製代碼

Node.insertBefore

這個方法在指定父節點內的某個子節點以前插入給定節點（並返回插入的節點）。下面是使用該方法的一個僞代碼:

1. Paris
2. London
3. New York

↓

Node.insertBefore(San Francisco, Paris)

↓

1. San Francisco
2. Paris
3. London
4. New York

let list = document.querySelector('ul');
let firstCity = list.querySelector('ul > li'); // 這裏咱們能夠使用 list.firstChild，可是這篇文章的目的是介紹 DOM API
let newCity = document.createElement('li');
newCity.textContent = 'San Francisco';
list.insertBefore(newCity, firstCity);
複製代碼

Node.removeChild

該 Node.removeChild 方法從 DOM 中刪除子節點而且返回已刪除的節點。請注意返回的節點已經再也不是 DOM 的一部分，但仍然保存在內存中。若是處理不當，可能會致使內存泄漏。

let list = document.querySelector('ul');
let firstItem = list.querySelector('li');
let removedItem = list.removeChild(firstItem);
複製代碼

Node.replaceChild

該方法用於替換父節點中的子節點（而且會返回被替換的子節點）。請注意，若是處理不當，這個方法可能會像 Node.removeChild 同樣致使內存泄漏。

let list = document.querySelector('ul');
let oldItem = list.querySelector('li');
let newItem = document.createElement('li');
newItem.innerHTML = 'Las Vegas';
let replacedItem = list.replaceChild(newItem, oldItem);
複製代碼

Node.cloneNode

這個方法用於用於建立調用此方法的給定節點的副本。當你須要在頁面上建立一個與現有元素相同的新元素時很是有用。它接受一個可選的 boolean 類型的參數，該參數用於表示是否對子節點進行深度克隆。

let list = document.querySelector('ul');
let clone = list.cloneNode();
複製代碼

Element.getAttribute / Element.setAttribute

Element.getAttribute 該方法返回元素上給定屬性的值，與之對應的，Element.setAttribute 方法用於設置給定元素上屬性的值。

let list = document.querySelector('ul');
list.setAttribute('id', 'my-list');
let id = list.getAttribute('id');
console.log(id); // 輸出 my-list
複製代碼

Element.hasAttribute / Element.removeAttribute

Element.hasAttribute 方法用於檢查給定元素是否具備指定的屬性。返回值是 boolean 類型。同時，經過調用 Element.removeAttribute，咱們能夠從元素中刪除給定名稱的屬性。

let list = document.querySelector('ul');
if (list.hasAttribute('id')) {
    console.log('list has an id');
    list.removeAttribute('id');
};
複製代碼

Element.insertAdjacentHTML

該方法將制定的文本解析爲 HTML，並將 HTML 元素節點插入到 DOM 樹中的給定位置。它不會破壞要插入的新 HTML 元素中的現有節點。插入的位置能夠是如下字符串之一：

1. beforebegin
2. afterbegin
3. beforeend
4. afterend

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>Hello World</p>
  <!-- beforeend -->
</div>
<!-- afterend -->
複製代碼

例：

var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');
複製代碼

請注意，使用此方法的時候，咱們須要適當的格式化給定的 HTML 元素。

結論和了解更多

我但願這篇文章對你有幫助，它會有助於你理解 DOM。正確處理 DOM 樹是很是重要的，若是不正確地使用它可能會給你帶來一些嚴重的後果。確保始終進行內存清理並適當格式化 HTML/XML 字符串。

若是須要了解更多，請查看官方 w3c 頁面。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。