Docker
Network
RxJS
Nginx
TypeScript
Data Structure And Algorithm
JavaScript
PostgreSQL
React
GitJavaScript 筆記：DOM 操作與遍歷
querySelectorAll 與 getElementsBy... 的差異
在 DOM 操作中，可透過多種方式選取 HTML 元素。需注意，document.querySelectorAll() 回傳的是靜態 NodeList，DOM 變動後內容不會更新。
相對地，document.getElementsBy...() 回傳的是動態 HTMLCollection，會隨 DOM 更新。
創造或插入元素
透過 document.createElement() 可創建新元素，但一個元素實例無法同時存在於多處。
刪除元素
可使用 remove() 直接刪除元素。早期需透過 removeChild() 與父層搭配。
改變或取得 Style 資訊
可透過 element.style 修改樣式，或使用 getComputedStyle() 取得現有樣式。
若有 CSS Variable，可透過 setProperty 修改。
HTML 屬性 (Attribute)
取得屬性可用兩種方式：
element.attributeNameelement.getAttribute('name')
差異在於路徑屬性：前者回傳絕對路徑，後者回傳相對路徑。
HTML 資料屬性 (Data Attribute)
可利用 element.dataset 存取或篩選。
Class 操作
element.classList 提供新增、刪除與切換 class 的方法。
NOTE: 盡量避免直接使用
element.className = 'xxxx'，因會覆蓋所有現有 class。
事件監聽
addEventListener 可綁定多個事件，建議優先使用。onevent 屬性會覆蓋舊的事件。
移除監聽器可使用 removeEventListener：
HTML 內直接寫事件屬性則不建議：
DOM 遍歷 (DOM Traversing)
在下方的程式碼中，主要是呈現如何透過 DOM Traversing (遍歷) 來操作和檢視不同層級的節點：
- 子層元素 (Children)
container.querySelector('.outer')：從container節點開始往下搜尋第一個.outer元素。container.childNodes：列出所有子節點，包括文字節點（空白也算）。container.children：僅包含子層元素 (不含文字節點)。container.firstElementChild：取得第一個子元素。
- 父層元素 (Parent)
container.parentNode與container.parentElement：都會指向<body>，差別在於parentNode可能包含文字節點。
- 尋找最近的外層元素
inner.closest('.outer')：向上尋找最近符合.outer的祖先元素，並修改背景。
- 兄弟元素 (Siblings)
container.previousElementSibling：取得前一個兄弟元素，這裡是<h1>...</h1>。container.nextElementSibling：取得下一個兄弟元素，這裡是<div class="footer">...</div>。previousSibling/nextSibling：可能回傳文字節點 (#text)，因此通常更推薦使用previousElementSibling與nextElementSibling。