DOM操作

JavaScript 的 DOM（Document Object Model）操作是一種用來訪問和操作 HTML 和 XML 文件結構的技術。DOM 是一個樹狀結構，每個節點都代表文檔中的一個部分，例如元素、屬性、文本等等。透過 JavaScript 操作 DOM，開發者可以動態地改變網頁的內容和結構。

以下是 JavaScript 操作 DOM 的詳細說明：

1. 選取 DOM 元素

要操作 DOM，首先需要選取我們想要操作的元素。以下是幾種常見的選取方式：

document.getElementById：根據元素的 id 選取單個元素。
```
let element = document.getElementById("myElementId");
```
document.getElementsByClassName：根據元素的 class 名稱選取所有匹配的元素，返回一個 HTMLCollection。
```
let elements = document.getElementsByClassName("myClassName");
```
document.getElementsByTagName：根據元素的標籤名稱（如 div、p）選取所有匹配的元素，返回一個 HTMLCollection。
```
let elements = document.getElementsByTagName("div");
```
document.querySelector：根據 CSS 選擇器選取第一個匹配的元素。
```
let element = document.querySelector(".myClass");
```
document.querySelectorAll：根據 CSS 選擇器選取所有匹配的元素，返回一個 NodeList。
```
let elements = document.querySelectorAll(".myClass");
```

2. 操作 DOM 元素的內容

更改元素的文本內容：可以使用 textContent 或 innerHTML 來更改元素的文本內容。

let element = document.getElementById("myElementId");
element.textContent = "This is new text!";

如果要插入 HTML 標籤，可以使用 innerHTML：

element.innerHTML = "<strong>This is bold text!</strong>";

更改元素的屬性：可以使用 setAttribute 和 getAttribute 來操作元素屬性。

element.setAttribute("class", "newClassName");
let id = element.getAttribute("id");

操作樣式：可以使用 style 屬性來直接改變元素的內聯樣式。

element.style.color = "red";
element.style.fontSize = "20px";

3. 操作 DOM 結構

創建新元素：使用 document.createElement 可以創建新元素，然後使用 appendChild 或 insertBefore 將其插入到 DOM 中。

let newElement = document.createElement("p");
newElement.textContent = "This is a new paragraph!";
document.body.appendChild(newElement);

移除元素：使用 removeChild 或 remove 方法來移除元素。

let parentElement = document.getElementById("parent");
let childElement = document.getElementById("child");
parentElement.removeChild(childElement);

// 或者直接移除
childElement.remove();

複製元素：使用 cloneNode 可以複製元素。cloneNode(true) 會複製整個元素，包括其子元素。

let clonedElement = element.cloneNode(true);
document.body.appendChild(clonedElement);

4. 事件處理

事件是網頁元素與用戶互動的核心。JavaScript 提供了多種方式來處理 DOM 元素上的事件。

添加事件監聽器：使用 addEventListener 可以將事件監聽器附加到元素上。

element.addEventListener("click", function(event) {
    console.log("Element clicked!");
});

移除事件監聽器：使用 removeEventListener 可以移除之前添加的事件監聽器。

function handleClick(event) {
    console.log("Element clicked!");
}

element.addEventListener("click", handleClick);
element.removeEventListener("click", handleClick);

事件對象：事件處理函式的第一個參數是 event 對象，它包含了有關事件的詳細信息，如事件的類型、觸發事件的元素、滑鼠位置等。
```
element.addEventListener("click", function(event) {
    console.log("Mouse X: " + event.clientX);
    console.log("Mouse Y: " + event.clientY);
});
```
事件冒泡與捕獲：事件有兩種傳播方式：冒泡和捕獲。冒泡是指事件從目標元素冒泡到父元素，而捕獲是指事件從父元素捕獲到目標元素。
```
element.addEventListener("click", function(event) {
    console.log("Clicked!");
}, true); // true 表示在捕獲階段處理事件
```

5. DOM 的導航

DOM 提供了多種屬性來導航不同的節點：

父節點：parentNode
```
let parent = element.parentNode;
```

子節點：childNodes、firstChild、lastChild

let children = element.childNodes;
let firstChild = element.firstChild;

兄弟節點：previousSibling、nextSibling

let previous = element.previousSibling;
let next = element.nextSibling;

Element 專有的導航屬性：parentElement、children、firstElementChild、lastElementChild、previousElementSibling、nextElementSibling。
```
let children = element.children;
let firstElement = element.firstElementChild;
```

6. Class 操作

使用 classList 可以方便地操作元素的 class 屬性：

添加 class：classList.add
```
element.classList.add("newClass");
```
移除 class：classList.remove
```
element.classList.remove("oldClass");
```
切換 class：classList.toggle
```
element.classList.toggle("active");
```

檢查 class：classList.contains

if (element.classList.contains("myClass")) {
    console.log("Element has myClass");
}

7. 表單操作

DOM 提供了對表單元素進行操作的多種方式，包括獲取表單數據、設置表單值、提交表單等。

獲取表單值：

let inputValue = document.getElementById("myInput").value;

設置表單值：

document.getElementById("myInput").value = "New Value";

提交表單：

document.getElementById("myForm").submit();

阻止表單默認行為：

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    console.log("Form submission prevented");
});

8. DOM 節點的類型

DOM 節點有不同的類型，每種節點類型有不同的屬性和方法：

元素節點（Element Node）：代表 HTML 標籤，nodeType 值為 1。
屬性節點（Attribute Node）：代表屬性，nodeType 值為 2。現代 DOM API 通常使用 element.getAttribute() 而不是直接操作屬性節點。
文本節點（Text Node）：代表元素或屬性的文本內容，nodeType 值為 3。
註解節點（Comment Node）：代表註解，nodeType 值為 8。

9. 操作文檔碎片（Document Fragment）

文檔碎片是一種輕量級的 DOM 節點，可以容納其他節點，通常用於一次性將多個元素添加到 DOM 中，以提高性能。

let fragment = document.createDocumentFragment();

let newElement1 = document.createElement("div");
let newElement2 = document.createElement("p");

fragment.appendChild(newElement1);
fragment.appendChild(newElement2);

document.body.appendChild(fragment); // 一次性將所有元素添加到 DOM

10. 異步操作與 DOM

使用 setTimeout、setInterval 或 AJAX 等方法，可以在異步操作完成後更新 DOM。例如：

setTimeout(() => {
    element.textContent = "Updated after 2 seconds";
}, 2000);

這些是 JavaScript 操作 DOM 的主要方法和技術。掌握這些技術可以讓你更靈活地構建動態和互動的網頁應用程序。