等HTML標籤
節點：DOM樹中的基本單元，可以是元素、文字或屬性。
DOM 樹：將網頁表示為節點樹的分層結構。根節點是文檔，每個 HTML 元素都是從它分支的節點。
DOM 表示範例：
對於 HTML 文檔，例如：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div>
<p>The DOM for this document might look like this:<br>
</p>
<pre class="brush:php;toolbar:false">Document
├── html
├── head
│ └── title
└── body
└── div#content
├── h1
└── p
登入後複製
登入後複製
JavaScript 如何使用 DOM：
-
存取元素：JavaScript 可以使用 document.getElementById() 或 document.querySelector() 等方法從 DOM 中選擇和存取元素。
let heading = document.getElementById("content");
登入後複製
-
操作元素：JavaScript 可以修改元素的內容、屬性或樣式。
heading.innerHTML = "New Content";
heading.style.color = "red";
登入後複製
-
事件處理：JavaScript 可以將事件偵聽器附加到 DOM 元素，以回應使用者操作，例如按一下、按鍵等。
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
登入後複製
-
建立和刪除元素：JavaScript 可以動態建立新元素或刪除現有元素。
const newElement = document.createElement("div");
document.body.appendChild(newElement);
登入後複製
為什麼 DOM 很重要：
- 它為 JavaScript 提供了一種與網頁的結構和內容互動並操作網頁的結構和內容的方法。
- 它允許動態、互動式網頁，無需重新載入頁面（例如，更新 UI 或處理使用者輸入）。
DOM 方法：
以下是 JavaScript 中一些常用的 DOM 方法：
-
getElementById()：透過 ID 選擇元素。
-
querySelector()：使用 CSS 選擇器選擇第一個符合元素。
-
createElement()：建立一個新的 HTML 元素。
-
appendChild()：新增新的子節點到元素。
-
removeChild()：從元素中移除子節點。
-
setAttribute()：設定元素的屬性。
-
addEventListener()：將事件處理程序附加到元素。
實際應用範例：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div>
<p>The DOM for this document might look like this:<br>
</p>
<pre class="brush:php;toolbar:false">Document
├── html
├── head
│ └── title
└── body
└── div#content
├── h1
└── p
登入後複製
登入後複製
在此範例中，選擇了 h1 元素，更新了其內容，並附加了一個單擊事件偵聽器。單擊標題時，會顯示一條警報。
DOM 是使用 JavaScript 動態操作網頁結構的基本概念，也是建立互動式 Web 應用程式的基礎。
