DOM 操作

1.選取DOM元素
在進行 DOM 操作前，首先要選取我們想要修改的 HTML 元素。JavaScript 提供了幾個常用方法來選取 DOM 元素：
(1)getElementById()：
透過元素的 id 來選取特定元素，這是最常用的選取方法之一。

let header = document.getElementById("header");
console.log(header.textContent);  // 輸出該元素的文字內容

(2)querySelector()：
使用 CSS 選擇器來 選取第一個符合條件的元素，非常靈活。

let mainButton = document.querySelector(".button");
console.log(mainButton.textContent);  // 輸出第一個 class 為 button 的元素內容

(3)querySelectorAll()：
這個方法與 querySelector() 類似，但會選取所有符合條件的元素，並返回一個 NodeList（類似陣列）。

let allButtons = document.querySelectorAll(".button");
allButtons.forEach(button => {
    console.log(button.textContent);  // 輸出每個 button 的內容
});

2.修改DOM元素內容
(1)修改文字內容：
使用 textContent 或 innerHTML 屬性來修改元素的內容。textContent 只修改文字部分，而 innerHTML 可以插入 HTML 標籤。

let header = document.getElementById("header");
header.textContent = "新的標題";

(2)修改樣式：
可以透過 style 來改變元素的 CSS 樣式，例如字體大小、顏色等。

header.style.color = "blue";
header.style.fontSize = "24px";

(3)修改屬性：
使用 setAttribute() 或直接操作屬性來改變元素的屬性，例如圖片的 src 或按鈕的 disabled 狀態。

let image = document.getElementById("myImage");
image.setAttribute("src", "new-image.jpg");

3.事件監聽
網頁的互動性大多來自事件，JavaScript 允許我們為 HTML 元素添加事件監聽器。最常見的事件是 :
click : 用戶點擊按鈕時觸發一個動作。
mouseover：滑鼠移動到元素上時觸發。
keydown：按下鍵盤按鍵時觸發。

addEventListener()：為元素添加事件監聽器。這種方法能讓你在同一元素上綁定多個事件，而不會覆蓋原有的事件。

let button = document.querySelector(".button");
button.addEventListener("click", function() {
    alert("按鈕被點擊了！");
});

4.動態新增與刪除元素
createElement()：用來動態創建新元素。
appendChild()：將新創建的元素添加到 DOM 中。上面的範例用到了 appendChild()，將新段落插入到 body 元素中。

removeChild()：用來從 DOM 中移除子元素。