DOM是什麼？

用於表示和操作HTML和XML文檔的程式接口。
簡單來說就是將網頁文檔視為樹狀結構的方法，其中每個元素都是樹的節點通過JS來訪問和修改。

目的是允許開發者使用JS來動態讀取、更新和操作網頁的內容和結構。
實現互動性、動態生成內容和對用戶操作作出回應而無需重新加載整個網頁。

DOM基本概念

1. 文檔（Document）
   表示整個網頁，它是DOM的頂級節點。我們可以使用document對象來訪問和操作整個文檔。

2. 元素（Element）
   文檔中的HTML標籤，例如<div>、<p>、<h1>等。
   每個元素都可以有屬性和內容，可通過DOM來操作這些屬性和內容。

3. 節點（Node）
   DOM樹中的每個部分，包括元素節點、屬性節點、文本節點等。
   節點是DOM的基本結構，通過它們來訪問和操作文檔的不同部分。

使用JS操作DOM

1. 選擇元素
   我們可以使用不同的方法來選擇DOM中的元素，例如通過標籤名、ID、類名等。
   範例:選擇具有ID為myDiv的元素

var element = document.getElementById("myDiv");

2. 更改內容
   可以使用DOM來更改元素的內容。
   範例:修改元素的文本或HTML

element.innerHTML = "新的內容";
element.textContent = "新的文本";

3. 操作屬性
   我們可以設置或讀取元素的屬性值。
   範例:修改圖片的src屬性

var img = document.getElementById("myImage");
img.src = "new-image.jpg";

4. 創建新元素
   範例:創建新的HTML元素，並將它們添加到文檔中

var newDiv = document.createElement("div");
newDiv.textContent = "這是新的元素";
document.body.appendChild(newDiv);

5. 事件處理
   註冊事件監聽器來對用戶操作作出回應。
   範例:當按鈕被點擊時觸發一個函數

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

今天先介紹到這邊，感謝觀看!