[WebAPIs] 淺談 JavaScript DOM Manipulation (1): 選取與樣式操作

為什麼要學會操作 DOM 元素?
瀏覽器載入網頁文件時，會生成 DOM，DOM 是一個用來描述網頁結構的物件，開發者可利用 JavaScript 操縱 DOM API，讓我們能控制上網頁的任何元素，達到讓網頁做各種變化、功能的效果。常見的 DOM 操作包含：綁定事件監聽、修改 DOM 元素樣式、增加/修改/刪除 DOM 元素…等。
詳細關於 DOM 的定義，可參考文件物件模型 (DOM)。

Step 1：選取 DOM 元素#

要先告訴瀏覽器你要選取哪個 DOM 元素，才能進行後續操作，目前常見的選取方法有 querySelector 和 querySelectorAll。

1
//以 document 為基準，用 CSS 選擇器的方式選取元素
2
//querySelector 只會選取第一個符合 Selector 的元素
3
document.querySelector('<CSS Selector>');
4

5
//以 document 為基準，用 CSS 選擇器的方式選取元素
6
//querySelectorAll 會選取所有符合 Selector 的元素，會回傳一個 NodeList
7
document.querySelectorAll('<CSS Selector>');
8

9
//使用範例
10
//選取 class 為 navbar 的元素
11
const navbar = document.querySelector('.navbar');
12
//選取 class 為 article 元素下的所有 br tag element
13
const brList = document.querySelectorAll('.article br');
14
//選取 class 為 article 元素下，但不是 otherInfo class 中 br 的，所有其他 br tag element
15
const articleBrList = document.querySelector('.article br:not(.otherInfo br)')

除了直接選取要操縱的 DOM 元素，也可選取鄰近/父子元素，方法如：

• nextElementSibling: 回傳其父節點的 childNodes 列表中緊跟在其後面的元素節點，也就是緊跟在後的兄弟節點
• previousElementSibling: 回傳其父節點的 childNodes 列表中緊跟在其前面的元素節點，也就是緊跟在前的兄弟節點
• parentNode: 回傳父層元素
• children: 回傳子層元素，會是一個 HTMLCollection

以下為簡單程式範例：

關於什麼是 HTMLCollection，可參考 HTML合集

Step 2：編輯 DOM 元素#

選取 DOM 元素後，常見的編輯/操作如：改變元素樣式、改變元素內容、以該元素為基礎新增元素、綁定事件監聽等。這裡簡單介紹如何改變元素樣式，其他有機會再另外介紹~

可能會有人好奇為什麼不直接用 CSS 寫好元素樣式，而要用 JavaScript 操作?元素基本樣式大多還是可以用 CSS 達成，但有時候為了因應使用者互動，或是製造動畫效果，就會用到 JavaScript。
例如：在頁面滾動到一定距離時，將 Navbar 背景顏色改為另一個顏色，這就需要搭配 JavaScript 事件監聽+修改元素樣式才能達成。

改變元素樣式可以用 class 或 style 屬性來修改，需注意的是，在 JavaScript 中寫 style 要將有 - 的 CSS 樣式改為小駝峰式命名，例如：background-color 要改為 backgroundColor；margin-top 要改為 marginTop。
另外，以 style 的屬性來修改元素樣式，會變成元素的 inline-style，撰寫時需注意 CSS 權重問題。

以下為簡單程式範例：

小結#

學會如何選取 DOM 元素，就可對元素進行各種操作，DOM 元素有許多預設屬性與方法，大多是需要再查即可，這裡列出一些目前常用/常見的方法，與大家分享，有機會再詳細說明如何做更多 DOM 元素操作!

Reference:#

• [WebAPIs] JavaScript DOM Element Manipulation
• DOM API 一篇就會！

如有任何問題歡迎聯絡、不吝指教✍️