JavaScript - 文件對象模型 (DOM)

DOM 是什麼？

文件對象模型，通常稱為DOM，是HTML和XML文件的編程接口。它將文件的結構表示為類似於樹狀層次結構的對象，其中每個對象對應於文件的一部分，如元素、屬性或文本節點。

JavaScript - HTML DOM

想像你正在用樂高積木建造房子。DOM就像一個神奇的藍圖，不僅向你展示房子是如何建造的，還允許你使用JavaScript來操作和重新排列積木。它是一個強大的工具，橋接了網頁和編程語言之間的差距。

DOM 的關鍵概念

節點：文件的每一部分都是節點。元素、屬性和文本都是不同類型的節點。
樹狀結構：DOM將文件表示為一棵樹，以document對象為根。
遍歷：你可以使用各種方法和屬性來導航DOM樹。
操作：DOM允許你動態地改變文件的結構、樣式和內容。

讓我們看一個簡單的例子來說明這些概念：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個DOM範例</title>
</head>
<body>
<h1 id="mainHeading">歡迎來到DOM</h1>
<p>這是一段文字。</p>
</body>
</html>

在這個HTML文件中，DOM樹會像這樣：

document
└── html
├── head
│   └── title
│       └── "我的第一個DOM範例"
└── body
├── h1
│   └── "歡迎來到DOM"
└── p
└── "這是一段文字。"

HTML DOM 是什麼？

HTML DOM是一個標準的對象模型和編程接口，用於HTML。它定義了：

HTML元素作為對象
所有HTML元素的屬性
訪問所有HTML元素的方法
所有HTML元素的事件

實質上，HTML DOM是獲取、改變、添加或刪除HTML元素的標準。

使用HTML DOM

讓我們探討一些使用HTML DOM的常見操作：

訪問元素

// 通過ID獲取元素
const heading = document.getElementById('mainHeading');

// 通過標籤名獲取元素
const paragraphs = document.getElementsByTagName('p');

// 通過類名獲取元素
const highlights = document.getElementsByClassName('highlight');

// 使用querySelector進行更複雜的選擇
const firstParagraph = document.querySelector('p');

在這些例子中，我們使用不同的方法從HTML文件中選擇元素。這就像用魔杖指著網頁的特定部分！

改變內容

// 改變元素的文本內容
heading.textContent = '歡迎來到神奇的DOM世界！';

// 改變元素的HTML內容
paragraphs[0].innerHTML = '這段文字已被<strong>修改</strong>！';

在這裡，我們正在更新我們元素的內容。這就像立即擦除和重寫網頁的部分內容！

修改樣式

// 改變元素的樣式
heading.style.color = 'blue';
heading.style.fontSize = '24px';

這些行代碼讓我們給標題來個大變身，改變它的顏色和大小。這就像為你的網頁元素請來了一位時尚設計師！

創建和刪除元素

// 創建一個新元素
const newParagraph = document.createElement('p');
newParagraph.textContent = '這是一個新創建的段落。';

// 將新元素添加到文件中
document.body.appendChild(newParagraph);

// 刪除一個元素
document.body.removeChild(paragraphs[0]);

在這個例子中，我們扮演網頁建築師的角色——創建新的元素和拆除舊的元素，只需幾行代碼！

為什麼需要DOM？

DOM對於以下幾個原因至關重要：

動態網頁：沒有DOM，網頁會是靜態的。DOM讓我們能夠創建有互動性和動態性的網頁體驗。
關注點分離：DOM提供了一種方式，讓我們可以使用JavaScript來操作網頁的內容和結構，將其與HTML和CSS分離。
跨瀏覽器兼容性：DOM提供了一個標準的編程接口，在不同的瀏覽器中都能工作，確保了開發的一致性。
事件處理：DOM允許我們將事件監聽器附加到元素上，使我們能夠響應用戶的交互，如點擊、按鍵和鼠標移動。
AJAX和單頁應用程序：DOM對於在不重新加載整個頁面的情況下更新網頁的部分內容至關重要，這是現代網頁應用程序的基礎。

讓我們看一個結合了這些概念的例子：

<!DOCTYPE html>
<html>
<head>
<title>待辦事項清單</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>我的待辦事項清單</h1>
<input type="text" id="newTodo">
<button id="addTodo">添加待辦事項</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

這個例子展示了簡單的待辦事項應用程序。它展現了：

使用DOM訪問元素
創建新元素
修改元素的內容和樣式
處理事件
在不重新加載頁面的情況下動態更新頁面

通過使用DOM，我們創建了一個響應用戶輸入並實時更新的交互式應用程序。這就是DOM的力量！

常用的DOM方法和屬性

這裡是一張常用DOM方法和屬性的表格：

方法/屬性	描述
`getElementById()`	返回指定ID的元素
`getElementsByClassName()`	返回具有指定類名的元素集合
`getElementsByTagName()`	返回具有指定標籤名的元素集合
`querySelector()`	返回匹配CSS選擇器的第一個元素
`querySelectorAll()`	返回匹配CSS選擇器的所有元素
`createElement()`	創建一個新元素
`appendChild()`	添加一個新的子元素
`removeChild()`	刪除一個子元素
`innerHTML`	獲取或設置元素內部的HTML內容
`textContent`	獲取或設置元素的文本內容
`style`	獲取或設置元素的內聯樣式
`classList`	讓你操作元素的類名
`addEventListener()`	為元素添加事件處理器

總結來說，DOM是一個強大的工具，為網頁注入了生命。它讓我們能夠創建動態、交互式的網頁體驗，響應用戶的操作並實時更新。在你繼續網頁開發的旅程中，你會發現DOM是一個不可或缺的助手，在創建有吸引力和響應式的網頁應用程序時。快樂編程！

Credits: Image by storyset