美思 原生 [JavaScript] 網頁程式設計:操作網頁元素

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

前言

在本文中,我們介紹以 JavaScript 程式操作網頁元素的方式。這篇文章的內容對於網頁程式的使用者界面相當重要。

在不使用第三方模板 (template) 或是網頁元件 (web component) 的前提下,使用本文所介紹的方式就可以動態修改程式的使用者界面,只是程式碼寫起來比較長。

建立網頁元素

使用 Document.createElement() 函式可以動態地製造 HTML 元素。一開始做出來的 HTML 元素是空的,得再用其他指令增添其內容。參考以下範例:

let elem = document.createElement('div');
elem.innerText = 'Some text';

document.getElementById('app').appendChild(elem);

在本程式中,我們建了個 <div> 元素,將該元素內部的文字指派為 'Some text'

剛生成 HTML 元素時,頁面上不會顯示出來,得將新生成的 HTML 元素掛在網頁某個現有的元素上,該元素才會顯現出來。在本例中,我們將新生成的元素 elem 掛到 idapp 的元素上。

用 JavaScript 生成的網頁元素,在檢視網頁原始碼時不會顯現出來。因為在網頁載入的第一時間,該元素尚未生成。所以我們說這些元素是動態產生的。

移除網頁元素

使用 Node.removeChild() 函式可動態地移除網頁元素。參考以下範例程式:

let elem = document.getElementById('second');

elem.parentNode.removeChild(elem);

細心的讀者應該有注意到我們先將錨點元素從 elem 移到 elem.parentNode 後,再呼叫 removeChild() 函式來移除 elem。這是因為現行的網頁 API 不允許網頁元素移除自身,所以得拐個彎,移動錨點元素後再移除原先的目標元素。

移動網頁元素

網頁 API 有數個和移動網頁元素相關的函式。在本節中,我們來看一下 Node.insertBefore() 函式,這個函式可將某個網頁元素移動另一個網頁元素的前面。參考以下範例程式:

let second = document.getElementById('second');
let third = document.getElementById('third');

document.body.insertBefore(third, second);

複製網頁元素

當我們對網頁元素做指派運算時,瀏覽器不會拷貝該元素,而是將變數指向該元素。如果我們想要拷貝元素,得明確使用 Node.cloneNode() 才行。參考以下範例程式:

let src = document.getElementsByClassName('some-class').item(0);

let dest = src.cloneNode(true);

src.insertAdjacentElement('afterend', dest);

在使用 cloneNode() 函式時,建議傳入參數 true,這時的拷貝才是深拷貝 (deep copy)。除非自己明確知道當下需要淺拷貝 (shallow copy),深拷貝比較符合一般程式對拷貝這個行為的期待。

修改網頁元素的文字內容

網頁元素有許多屬性,可修改網頁元素的內容。像是 Node.textContent 屬性可修改該元素內部的文字。參考以下範例:

document.querySelectorAll('.some-class').forEach(function (elem) {
  elem.textContent = 'Some Text';
});

結語

在本文中,我們介紹操作網頁元素相關的網頁 API。

其實,以本文所介紹的函式為出發點,就可以在不依賴第三方函式庫或網頁元件 (web component) 的前提下動態生成網頁程式的使用者界面。這些函式構成初代網頁模板的基礎。

關於作者

身為資訊領域碩士,美思認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

美思喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,美思將所學寫成文章,放在這個網站上和大家分享。