為什麼要學會操作 DOM 元素?
瀏覽器載入網頁文件時，會生成 DOM，DOM 是一個用來描述網頁結構的物件，開發者可利用 JavaScript 操縱 DOM API，讓我們能控制上網頁的任何元素，達到讓網頁做各種變化、功能的效果。常見的 DOM 操作包含：綁定事件監聽、修改 DOM 元素樣式、增加/修改/刪除 DOM 元素…等。
詳細關於 DOM 的定義，可參考文件物件模型 (DOM)。
Step 1: 選取 DOM 元素
要先告訴瀏覽器你要選取哪個 DOM 元素，才能進行後續操作，目前常見的選取方法有 querySelector 和 querySelectorAll 。
除了直接選取要操縱的 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 元素操作!
