DOM 的定義
DOM（Document Object Model，文檔對象模型）是 HTML 和 XML 文檔的編程接口。它將文檔解析為一個由節點和對象組成的樹狀結構，允許開發者通過編程方式動態訪問和操作文檔的內容、結構和樣式。
DOM 的作用
DOM 的主要作用是為開發者提供一種與網頁內容交互的方式，使得可以通過 JavaScript 等腳本語言動態地修改網頁的內容、結構和樣式。
通過 DOM，開發者可以訪問和修改 HTML 元素、屬性和文本內容。例如，可以動態地添加、刪除或修改頁面中的元素。
DOM 允許開發者處理用戶交互事件，如點擊、鼠標移動、鍵盤輸入等。通過事件監聽器，可以響應用戶的操作并執行相應的邏輯。
DOM 提供了對 CSS 樣式的訪問和修改能力，使得開發者可以動態地改變元素的樣式，實現動畫效果或響應式設計。
通過 DOM，開發者可以遍歷文檔樹，查找特定的元素或節點，并對其進行操作。這在處理復雜文檔結構時非常有用。
DOM 的樹狀結構
DOM 將文檔表示為一個樹狀結構，每個節點代表文檔中的一個部分。例如，HTML 文檔中的每個標簽、屬性和文本內容都對應 DOM 樹中的一個節點。
<!DOCTYPE html>
<html>
<head><title>DOM Example</title>
</head>
<body><h1>Hello, World!</h1><p>This is a paragraph.</p>
</body>
</html>
上述 HTML 文檔對應的 DOM 樹結構如下：
- Document
- html
- head
- title
- "DOM Example"
- title
- body
- h1
- "Hello, World!"
- p
- "This is a paragraph."
- h1
- head
- html
DOM 操作示例
以下是一個簡單的 JavaScript 示例，展示了如何使用 DOM 動態修改網頁內容：
// 獲取 h1 元素
const heading = document.querySelector('h1');// 修改 h1 元素的文本內容
heading.textContent = 'Welcome to the DOM!';// 創建一個新的段落元素
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph added via JavaScript.';// 將新段落添加到 body 中
document.body.appendChild(newParagraph);
通過 DOM，開發者可以靈活地操作網頁內容，實現豐富的交互效果和動態更新。
)
