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

zoomdong發表於2019-06-04
JavaScript

介紹

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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章