原生 [JavaScript] 網頁程式設計：選取網頁元素

前言

在網頁前端程式中，我們利用 HTML 文件充當程式的使用者界面，藉由和 HTML 文件上的元素 (按鈕、選單等) 互動來操作該網頁程式。但 HTML 文件本身是靜態的內容，我們得用 JavaScript 程式幫網頁補上動態行為。

在本文中，我們暫時不講撰寫動態行為的方法，先講如何使用原生 JavaScript 程式選取網頁元素，這是操作網頁元素的前置動作。不論是要直接修改網頁元素，還是要幫網頁元素寫事件處理器，前提是要能正確地選取目標網頁元素。

選取網頁元素的依據

用 JavaScript 選取網頁元素的依據有以下數種：

• 標籤 (tag) 名稱
• class ，自定義的類別，可跨多個標籤
• id ，自定義的識別字，在同一頁面中僅用於單一標籤
• 屬性 (attribute)，標籤所附帶的屬性
• 虛擬類別 (pseudo class)
• 虛擬元素 (pseudo element)
• 多元素間的相互關係

基本上，CSS 選擇器 (CSS selector) 可寫的項目大抵上都能使用。

選取網頁元素的函式可見於 Document 或 Element 物件。本文列出數個常見的函式。

簡易型網頁元素選取

這類型的函式名稱為 document.getElement* 或 elem.getElement*，會根據單一的條件去選取網頁元素。

Document.getElementsByTagName() 或 Element.getElementByTagName() 會回傳所有符合名稱的標籤。參考範例如下：

let elems = document.getElementsByTagName('div');

Document.getElementsByClassName() 或 Element.getElementByClassName() 會回傳所有符合 class 的標籤。參考範例如下：

let elems = document.getElementsByClassName('some-class');

Document.getElementById() 會列出符合 id 的標籤：

let elem = document.getElementById('some-id');

要注意這時候只會回傳單一標籤，而非標籤的集合。

走訪 getElement* 所選取的網頁元素

喜歡函數式程式設計的程式人可利用 Array.prototype.forEach 來走訪：

Array.prototype.forEach.call(elems, function (elem) {
  // Manipulate `elem` here.
});

傳統的命令式程式設計則是使用 for 迴圈來走訪元素：

for (let i = 0; i < elems.length; i++) {
  // Manipulate `elems[i]` here.
}

萬用型網頁元素選取

這類型的函式名稱為 document.querySelector* 或 elem.querySelector*，使用 CSS 選擇器 (CSS selector) 為條件來選取元素。

Document.querySelectorAll() 或 Element.querySelectorAll() 會回傳所有符合條件的網頁元素。參考下例：

let elems = document.querySelectorAll('div.some-class');

Document.querySelector() 或 Element.querySelector() 同樣以 CSS 選擇器為選擇網頁元素的依據，但只會回傳取得的第一個元素。參考下例：

let elem = document.querySelector('div.some-class');

雖然 querySelector* 系列的函式比較強大好用，但這個函式需要解析 CSS 選擇器，速度上多多少少會受影響。當條件允許時，應優先用前文所提到的 getElement* 系列函式。

走訪 querySelector* 所選取的網頁元素

Document.querySelectorAll() 所傳出來的集合本身就有提供 NodeList.prototype.forEach() 函式來走訪網頁元素。參考下例：

elems.forEach(function (elem) {
  // Manipulate `elem` here.
});

但 Internet Explorer 不支援 forEach() 函式，如果很在意相容性的話，應該使用傳統的 for 迴圈來走訪元素。參考下例：

for (let i = 0; i < elems.length; i++) {
  // Manipulate `elems[i]` here.
}

為什麼走訪網頁元素的方式會分為兩種呢？這是實作面的問題，我們目前就只能這種方式走訪元素，除非日後 JavaScript 的網頁 API 有所改變。

結語

在本文中，我們學到以原生 API 選取網頁元素的方法。由於我們還沒學到實用的網頁 API，只看這篇文章暫時無法實作什麼 JavaScript 程式。