常見的 DOM 操作方法

1.取得元素
JavaScript 可以透過多種方式來取得網頁中的 HTML 元素：

• getElementById(): 根據元素的 id 取得該元素。
• getElementsByClassName(): 根據類別名稱取得一組元素。
• querySelector(): 根據 CSS 選擇器取得第一個符合條件的元素。
• querySelectorAll(): 根據 CSS 選擇器取得所有符合條件的元素。

<p id="text">這是初始文字。</p>
<button id="changeTextButton">改變文字</button>

<script>
    const textElement = document.getElementById("text");
    const buttonElement = document.getElementById("changeTextButton");

    buttonElement.addEventListener("click", function() {
        textElement.textContent = "文字已經被改變！";
    });
</script>

在這段程式碼中，我們使用 getElementById() 取得段落元素和按鈕元素，並透過按鈕點擊事件，修改段落中的文字。

2.修改內容與屬性
JavaScript 可以動態地修改 HTML 元素的內容或屬性：

• textContent: 修改元素的文字內容。
• innerHTML: 修改元素的 HTML 內容（包括標籤）。
• setAttribute(): 修改元素的屬性，例如圖片的 src 屬性。

<img id="image" src="old_image.jpg" alt="Old Image">
<button id="changeImageButton">更換圖片</button>

<script>
    const imageElement = document.getElementById("image");
    const buttonElement = document.getElementById("changeImageButton");

    buttonElement.addEventListener("click", function() {
        imageElement.setAttribute("src", "new_image.jpg");
        imageElement.setAttribute("alt", "New Image");
    });
</script>

當按下按鈕時，這段程式碼會將圖片的 src 和 alt 屬性進行更換。

3.新增與移除元素
JavaScript 可以新增或移除網頁上的元素：

• createElement(): 創建新元素。
• appendChild(): 將新元素插入到 DOM 中。
• removeChild(): 從 DOM 中移除某個元素。

<ul id="list">
    <li>項目 1</li>
    <li>項目 2</li>
</ul>
<button id="addItemButton">新增項目</button>

<script>
    const listElement = document.getElementById("list");
    const buttonElement = document.getElementById("addItemButton");

    buttonElement.addEventListener("click", function() {
        const newItem = document.createElement("li");
        newItem.textContent = "新項目";
        listElement.appendChild(newItem);
    });
</script>

按下按鈕後，會在清單中新增一個項目。

DOM 操作的實用技巧

• 事件處理: 使用* addEventListener() *為元素添加點擊、滑鼠移動、鍵盤輸入等事件。
• 效能考量: 儘量減少過度操作 DOM，避免頻繁重繪和回流，影響頁面效能。
• 結合 CSS 動畫: 可以透過 JavaScript 動態添加、移除 CSS class 來觸發動畫效果。