原生 JavaScript 網頁程式設計:選取網頁元素

【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    前言

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

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

    選取網頁元素的依據

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

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

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

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

    簡易型網頁元素選取

    這類型的函式名稱為 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 程式。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk