1.1 DOM 的基本概念
文檔物件模型（DOM）是一個用於網頁文檔的程式接口。它將文檔的結構表示為一棵節點樹，其中每個節點都是文檔的一部分，如元素、文字、註解等。理解 DOM 及其節點是處理網頁技術的基礎。
DOM 的基本概念
什麼是 DOM？
DOM（Document Object Model）是一種分層結構，用來描述 HTML 文檔的內容。它允許程式和腳本動態地訪問文檔的內容，並改變其結構、樣式和內容。
節點和元素
在 DOM 的上下文中，文檔的所有部分都被視為節點（node）。節點有幾種類型：
- 元素節點：代表 HTML 標籤。
- 文字節點：代表位於元素節點內的文本。
- 註解節點：代表 HTML 中的註解。
- 文檔節點：代表整個文檔。
節點樹
DOM 表示為一個樹狀結構，其中每個節點可以有後代（子節點）。根節點是代表整個 HTML 文檔的 document 對象。
DOM 結構範例：
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
對於這個文檔，DOM 的樹會看起來如下：
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 節點類型
1. 元素節點
元素節點對應於 HTML 標籤。例如，標籤 <body> 的節點被稱為元素節點。
範例：
在這個範例中，<body> 和 <h1> 是元素節點。
<body>
<h1>Hello, World!</h1>
</body>
2. 文字節點
文字節點包含元素節點中的文本。文字節點是元素節點的後代，並包含字串數據。
範例：
在這個範例中，"Hello, World!" 是一個文字節點，是 <h1> 節點的後代。
<h1>Hello, World!</h1>
3. 註解節點
註解節點代表 HTML 中的註解，開始於 <!-- 並結束於 -->。
範例：
在這個範例中，<!-- This is a comment --> 是一個註解節點。
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. 文檔節點
文檔節點代表 DOM 樹的根節點，是文檔中所有其他節點的父節點。
範例：
JavaScript 中的 document 對象就是文檔節點：
console.log(document);
1.3 與 DOM 節點互動
1. 獲取節點資訊
節點對象的屬性可以用來獲取特定節點的資訊。例如，可以知道節點的類型、名字和內容。
範例：
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // 顯示: H1
console.log(heading.nodeType); // 顯示: 1 (元素節點)
console.log(heading.textContent); // 顯示: "你好，世界！"
2. 修改節點內容
可以使用 DOM 的屬性和方法來修改節點的內容。
範例：
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. 操作子節點
每個 DOM 節點都可以有子節點，可以訪問和修改它們。
範例：
<html>
<head>
<title>我的網站</title>
</head>
<body>
<ul>
<li>關於我們</li>
<li>職業生涯</li>
<li>聯繫方式</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // 顯示列表第一項的文本
console.log(lastItem.textContent); // 顯示列表最後一項的文本
1.4 有用的屬性
1. nodeName 和 nodeType 屬性
nodeName返回節點名稱nodeType返回節點類型（例如，1 對於元素節點，3 對於文本節點）
範例：
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // 顯示: H1
console.log(element.nodeType); // 顯示: 1
2. textContent 和 innerHTML 屬性
textContent返回或設置節點的文本內容innerHTML返回或設置節點的 HTML 內容
範例：
<html>
<head>
<title>我的網站</title>
</head>
<body>
<p>這是一個 <b>有趣的</b> 和 <b>有用的</b> 段落！</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // 顯示段落的文本內容
console.log(element.innerHTML); // 顯示段落的 HTML 內容
3. parentNode、childNodes、firstChild 和 lastChild 屬性
parentNode返回父節點childNodes返回所有子節點的集合firstChild返回第一個子節點lastChild返回最後一個子節點
範例：
<html>
<head>
<title>我的網站</title>
</head>
<body>
<ul>
<li>關於我們</li>
<li>職業生涯</li>
<li>聯繫方式</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // 顯示父節點
console.log(element.childNodes); // 顯示子節點的集合
console.log(element.firstChild); // 顯示第一個子節點
console.log(element.lastChild); // 顯示最後一個子節點
GO TO FULL VERSION