原生 [JavaScript] 網頁程式設計：操作網頁元素

前言

在本文中，我們介紹以 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 掛到 id 為 app 的元素上。

用 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) 的前提下動態生成網頁程式的使用者界面。這些函式構成初代網頁模板的基礎。