JavaScript DOM 操作入門
DOM（Document Object Model，文件物件模型）是瀏覽器用來表示 HTML 或 XML 文件的結構化 API。它將整個文件轉換為節點樹，讓開發者能夠透過 JavaScript 操作網頁內容，包括新增、刪除或修改元素。
在 DOM 中，所有內容都是節點，主要分為三種類型：元素節點（如 <div>、<p>）、文字節點（元素中的文字與空白）與註解節點。節點之間的關係類似家族樹，例如 <body> 是 <html> 的子節點，而 <head> 與 <body> 是兄弟節點。
JavaScript 提供多種方式選取 DOM 元素：
getElementById()：根據唯一的id屬性選取元素。getElementsByName()：根據name屬性選取一組元素。getElementsByTagName()：根據 HTML 標籤名稱選取元素集合。getElementsByClassName()：根據 class 名稱選取元素集合。querySelector()/querySelectorAll()：使用 CSS 選擇器語法選取單一或多個元素。
其中 querySelectorAll() 回傳的是靜態 NodeList，不會隨 DOM 變化而更新；若需轉換為陣列，可使用 Array.from()。
CSS 選擇器也支援進階組合方式：
- 群組選擇器（
,）：選取多個條件的元素。 - 子元素選擇器（
>）：選取直接子元素。 - 相鄰兄弟選擇器（
+）：選取緊接在某元素後的兄弟元素。 - 一般兄弟選擇器（
~）：選取所有在某元素後的兄弟元素。
透過這些選取方式，開發者可以精準地操作網頁元素，實現互動式功能，例如取得輸入值、統計元素數量或動態更新內容。DOM 是前端開發的基礎之一，掌握其操作方式是進階 JavaScript 技能的重要一環。
JavaScript DOM 節點操作與元素遍歷
在 JavaScript 中，DOM（Document Object Model）提供了一套 API，讓開發者能夠操作 HTML 文件的結構與內容。DOM 將整個文件表示為一棵節點樹，節點之間具有父子與兄弟關係，類似於家族譜系。
節點遍歷（Traversing the DOM）
開發者可以透過以下屬性在節點之間移動：
parentNode：取得指定節點的父節點。firstChild/lastChild：取得第一或最後的子節點（可能是文字節點）。firstElementChild/lastElementChild：僅取得元素型別的子節點。childNodes：回傳所有子節點（包含文字節點）的 NodeList。children：回傳所有元素子節點的 HTMLCollection。nextElementSibling/previousElementSibling：取得相鄰的兄弟元素節點。
節點操作（Manipulating Elements）
JavaScript 提供多種方法來建立與修改 DOM 節點：
createElement(tag)：建立新的元素節點。appendChild(node)：將節點加入至指定父節點的最後。textContent：讀取或設定元素內的所有文字內容（包含隱藏文字與換行）。innerText：僅讀取或設定可見的文字內容。innerHTML：讀取或設定元素內的 HTML 結構。
雖然 innerHTML 使用方便，但在處理使用者輸入時應避免使用，因為可能導致安全性問題（如 XSS 攻擊）。相較之下，createElement 搭配 appendChild 更安全且效能更佳，因為它不會重建整個 DOM 結構。
實務應用
透過 DOM 操作，開發者可以實現各種互動功能，例如：
- 動態新增或刪除清單項目。
- 建立簡易的按鈕點擊事件來遍歷清單。
- 建立計算機介面，透過按鈕與顯示區域進行輸入與運算。
掌握 DOM 節點操作與元素遍歷是前端開發的基礎能力，有助於開發更具互動性與動態性的網頁應用。
JavaScript DOM 高階元素操作
在 JavaScript 中，DOM（Document Object Model）提供了一套強大的 API，讓開發者能夠操作網頁的結構與內容。除了基本的節點選取與遍歷，DOM 還支援高效的元素操作方式，包括使用 DocumentFragment、插入與替換節點、複製與刪除元素等，這些技巧有助於提升效能與安全性。
DocumentFragment 與效能優化
DocumentFragment 是一種輕量級的 DOM 結構，允許開發者在不影響主 DOM 樹的情況下建立與操作元素。由於它不會觸發瀏覽器的重排（reflow），可用於批量新增元素後再一次性插入至 DOM，有效減少效能損耗。
插入與替換節點
DOM 提供多種插入節點的方法：
appendChild()：將節點加入至父節點的最後。insertBefore()：將新節點插入至指定子節點之前。insertAdjacentHTML()：以文字形式插入 HTML 結構，支援四種位置。replaceChild()：以新節點替換指定的舊節點。
insertAfter() 可透過 insertBefore() 搭配 nextElementSibling 實作。
append() 與 prepend()
append() 可同時插入多個節點或字串，適合批量操作；prepend() 則將內容插入至父節點的最前方。兩者皆支援 DOMString 與 Node，但不支援 Internet Explorer。
innerHTML 與 createElement 的比較
innerHTML 可快速插入 HTML 結構，但會重建整個節點內容，影響效能且存在安全風險。相較之下，createElement() 搭配 appendChild() 更安全且高效，適合處理使用者輸入或動態內容。
節點複製與刪除
cloneNode(deep)：複製節點，deep參數決定是否包含子節點。removeChild()：從父節點移除指定子節點，並可儲存以便稍後重新加入。
這些方法可用於實作佇列（Queue）、歷史紀錄、動態清單等互動功能。
JavaScript DOM 屬性與樣式操作
在 JavaScript 中，DOM（Document Object Model）不僅允許開發者操作網頁結構與內容，也提供了操作 HTML 屬性與 CSS 樣式的能力。透過 DOM API，開發者可以動態讀取、修改元素的屬性、樣式與類別，進一步實現互動式與主題化的網頁設計。
屬性與屬性值
HTML 元素的屬性在瀏覽器解析後會轉換為 DOM 物件的屬性。例如，<input type="text" id="username"> 會生成一個 HTMLInputElement，其 type 與 id 屬性可透過 JavaScript 存取。屬性值在 HTML 中總是字串，但在 DOM 中可能轉換為布林值、數字等型別。
常用屬性操作方法：
getAttribute(name)：取得指定屬性的值。setAttribute(name, value)：設定或新增屬性。removeAttribute(name)：移除指定屬性。hasAttribute(name)：判斷元素是否具有指定屬性。
data-* 屬性提供自訂資料儲存方式，可透過 element.dataset 物件存取。
操作 CSS 樣式
JavaScript 可透過 element.style 屬性直接操作元素的內嵌樣式，例如 element.style.color = "red"。若需一次設定多個樣式，可使用 style.cssText 或 setAttribute("style", ...)。
若需取得元素最終呈現的樣式（包含外部與嵌入式樣式），可使用 window.getComputedStyle(element) 方法。
類別操作（Class）
元素的 className 屬性可讀取或設定整個 class 字串。若需更細緻地操作類別，可使用 classList 屬性，它是一個 DOMTokenList，提供以下方法：
add()：新增類別。remove()：移除類別。replace(old, new)：替換類別。contains()：判斷是否包含某類別。toggle()：切換類別存在與否。
這些方法可用於實作主題切換、選單高亮、面板顯示等互動功能。
JavaScript DOM 事件處理入門
在 JavaScript 中，事件（Event）是使用者與網頁互動時所觸發的行為，例如點擊、滑鼠移動、鍵盤輸入等。DOM 提供一套事件模型與監聽機制，讓開發者能夠針對特定事件執行程式邏輯，實現互動式網頁功能。
事件模型與事件流
事件流描述事件在 DOM 樹中傳遞的順序，主要分為兩種模式：
- 事件捕獲（Capturing）：事件從最外層節點向內層傳遞。
- 事件冒泡（Bubbling）：事件從最內層節點向外層傳遞。
大多數瀏覽器預設使用事件冒泡模式，開發者可透過 addEventListener 的第三個參數設定是否使用捕獲模式。
事件監聽與處理方式
JavaScript 提供三種事件處理方式：
- HTML 屬性方式：直接在 HTML 標籤中使用
onclick等屬性。 - DOM Level 0：使用元素的事件屬性（如
element.onclick = function）設定處理函式。 - DOM Level 2：使用
addEventListener註冊事件，並可使用removeEventListener移除。
addEventListener 支援多個事件監聽器，並可接收事件物件（event），透過 event.target 取得觸發事件的元素。
常見事件類型
- 滑鼠事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
- 鍵盤事件：keydown、keyup、keypress
- 頁面載入事件：DOMContentLoaded、load、beforeunload、unload
DOMContentLoaded 在 DOM 結構建立完成後觸發，適合初始化操作；load 則在所有資源載入完成後觸發。
滑鼠座標與按鍵偵測
事件物件提供滑鼠座標資訊：
event.clientX/event.clientY：相對於瀏覽器視窗的位置。event.screenX/event.screenY：相對於螢幕的位置。
此外，event.button 可用於判斷使用者按下的是哪個滑鼠按鍵（左鍵、中鍵、右鍵等）。
透過事件處理機制，開發者能夠精準掌握使用者行為，並即時回應，打造互動性強且使用者友善的網頁介面。
JavaScript DOM 高階事件處理
JavaScript 的事件系統是前端互動的核心之一。除了基本的滑鼠與鍵盤事件，DOM 還支援滾動、焦點、委派與自訂事件等進階功能，並提供 MutationObserver 監控 DOM 結構變化。這些技術讓開發者能夠更精準地掌握使用者行為與網頁狀態，提升互動性與效能。
鍵盤事件
鍵盤事件包括 keydown（按鍵按下）、keyup（按鍵放開）與 keypress（按下字元鍵）。其中 event.key 回傳按下的字元，而 event.code 回傳實體鍵位代碼。
滾動事件與座標
scroll 事件在使用者滾動頁面時觸發，可透過 scrollTop 與 scrollLeft 取得滾動偏移量。scrollIntoView() 方法則可將指定元素滾動至可視範圍。
焦點事件
焦點事件包括 focus（獲得焦點）與 blur（失去焦點），常用於表單欄位的樣式提示與驗證。
事件委派（Event Delegation）
事件委派是一種效能優化技巧，透過在父元素上綁定事件監聽器，統一處理子元素的事件。這種方式可減少事件綁定數量，提升效能。
自訂事件與 dispatchEvent
開發者可透過 dispatchEvent() 主動觸發事件，並使用 isTrusted 判斷事件來源。
MutationObserver
MutationObserver 可偵測 DOM 結構變化，包括節點新增、移除、屬性變更與文字修改。透過 observe() 方法與選項設定，可精準控制監控範圍與類型。
透過這些高階事件處理技巧，JavaScript 開發者能夠打造更靈活、反應更即時的網頁應用，並有效管理複雜的互動邏輯與動態內容。
JavaScript 表單操作與事件處理
JavaScript 在網頁表單（Web Forms）中扮演關鍵角色，能夠即時監聽使用者輸入、驗證資料、控制提交流程，並處理各種輸入元件如文字欄位、單選鈕、核取方塊與下拉選單。透過 DOM API，開發者可建立互動性高且具備資料驗證能力的動態表單。
表單結構與提交流程
HTML 表單使用 <form> 元素定義，並透過 action 屬性指定提交目的地，method 屬性則決定使用 GET 或 POST 傳送資料。JavaScript 可透過 document.forms 取得頁面上的所有表單，並使用 form.elements 存取表單內的各個欄位。
提交表單時會觸發 submit 事件，開發者可使用 addEventListener 綁定事件處理函式，並透過 event.preventDefault() 阻止預設提交行為，以進行資料驗證或其他邏輯處理。
表單資料驗證與控制
在提交前，開發者可讀取欄位的 value 屬性進行驗證。若資料不符合要求，可透過修改 style 或 placeholder 提示使用者錯誤原因。若驗證成功，可使用 form.submit() 主動提交表單，但需注意此方法不會觸發 submit 事件。
特殊輸入元件處理
- 單選鈕（Radio Button）：使用相同
name屬性群組化，僅允許選擇一項。可透過迴圈與checked屬性判斷選項。 - 核取方塊（Checkbox）：允許多項選擇，需使用陣列儲存所有被勾選的值。
- 下拉選單（Select Box）：使用
<select>搭配<option>元素建立，透過element.value取得選定值。
表單事件監聽
change：當元素值變更並失去焦點時觸發，適用於輸入欄位、單選鈕、核取方塊與下拉選單。input：每次值變更即觸發，適用於即時監聽輸入欄位、文字區塊與選單。
透過這些事件，開發者可即時更新介面、提示錯誤或進行互動式操作。
JavaScript 表單操作不僅提升使用者體驗，也強化前端資料驗證與互動能力，是現代網頁開發不可或缺的一環。
JavaScript 表單操作與事件處理
JavaScript 在網頁表單（Web Forms）中扮演關鍵角色，能夠即時監聽使用者輸入、驗證資料、控制提交流程，並處理各種輸入元件如文字欄位、單選鈕、核取方塊與下拉選單。透過 DOM API，開發者可建立互動性高且具備資料驗證能力的動態表單。
表單結構與提交流程
HTML 表單使用 <form> 元素定義，並透過 action 屬性指定提交目的地，method 屬性則決定使用 GET 或 POST 傳送資料。
<form action="/login" method="post">
<input type="text" name="username" />
<button type="submit">登入</button>
</form>
監聽 submit 事件並驗證資料
使用 addEventListener 綁定 submit 事件，並使用 preventDefault() 阻止預設提交行為：
<script>
let form = document.querySelector("form");
form.addEventListener("submit", function(event) {
let username = form.elements["username"].value;
if (username === "") {
alert("請輸入使用者名稱");
event.preventDefault();
}
});
</script>
單選鈕（Radio Button）
使用相同 name 屬性群組化，僅允許選擇一項：
<input type="radio" name="gender" value="M"> 男性
<input type="radio" name="gender" value="F"> 女性
<button onclick="checkGender()">送出</button>
<script>
function checkGender() {
let radios = document.querySelectorAll("input[name='gender']");
for (let radio of radios) {
if (radio.checked) {
console.log("選擇性別：" + radio.value);
}
}
}
</script>
核取方塊（Checkbox）
允許多項選擇，使用陣列儲存：
<input type="checkbox" name="color" value="red"> 紅色
<input type="checkbox" name="color" value="blue"> 藍色
<button onclick="checkColors()">送出</button>
<script>
function checkColors() {
let boxes = document.querySelectorAll("input[name='color']");
let selected = [];
for (let box of boxes) {
if (box.checked) {
selected.push(box.value);
}
}
console.log("選擇顏色：" + selected.join(", "));
}
</script>
下拉選單（Select Box）
使用 <select> 搭配 <option>：
<select id="language">
<option value="js">JavaScript</option>
<option value="py">Python</option>
</select>
<button onclick="checkLanguage()">送出</button>
<script>
function checkLanguage() {
let lang = document.querySelector("#language").value;
console.log("選擇語言：" + lang);
}
</script>
input 與 change 事件
input 事件在每次輸入時觸發，change 事件在失去焦點後觸發：
<input type="text" id="username">
<div id="display"></div>
<script>
let input = document.querySelector("#username");
input.addEventListener("input", function() {
document.querySelector("#display").textContent = input.value;
});
</script>