HTML DOM 簡介
## HTML DOM 是什麼？
DOM（Document Object Model，文件物件模型）是瀏覽器將 HTML 文件解析後，建立成一棵「物件樹」。
例如以下 HTML：
```html
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎</h1>
<p>這是一段文字。</p>
</body>
</html>
```
瀏覽器會將它表示成類似以下的樹狀結構：
```text
document
└── html
├── head
│ └── title
└── body
├── h1
└── p
```
JavaScript 可以透過 DOM 找到或修改 HTML 元素，例如：
```javascript
document.querySelector("h1").textContent = "新的標題";
```
這段程式會找到 `<h1>` 元素，並修改它的文字內容。
---
## `window` 物件
`window` 代表目前的瀏覽器視窗，是瀏覽器提供的全域物件。許多常用的物件都屬於 `window`，例如：
- `window.document`：目前網頁的 DOM 文件
- `window.screen`：使用者螢幕資訊
- `window.innerWidth`、`window.innerHeight`：瀏覽器內容區域大小
- `window.location`：目前網址
- `window.history`：瀏覽記錄
由於 `window` 是全域物件，因此通常可以省略 `window.`：
```javascript
window.document.title;
document.title;
```
兩者效果相同。
---
## 範例：取得螢幕、主畫面與網頁標題
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>DOM 與 Window 範例</title>
</head>
<body>
<h1>瀏覽器資訊</h1>
<script>
// 1. 取得整個螢幕的尺寸
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
// 2. 取得螢幕可使用的主畫面尺寸
// availWidth、availHeight 通常會扣除工作列、Dock 等系統區域
const availableWidth = window.screen.availWidth;
const availableHeight = window.screen.availHeight;
// 3. 取得目前網頁的標題
const pageTitle = window.document.title;
console.log("螢幕寬度：", screenWidth);
console.log("螢幕高度：", screenHeight);
console.log("可使用的螢幕寬度：", availableWidth);
console.log("可使用的螢幕高度：", availableHeight);
console.log("網頁標題：", pageTitle);
</script>
</body>
</html>
```
假設螢幕解析度為 `1920 × 1080`，而作業系統的工作列佔用一部分空間，可能得到類似結果：
```text
螢幕寬度：1920
螢幕高度：1080
可使用的螢幕寬度：1920
可使用的螢幕高度：1040
網頁標題：DOM 與 Window 範例
```
---
## 相關尺寸的差異
### 1. 整個螢幕尺寸
```javascript
window.screen.width
window.screen.height
```
表示使用者螢幕的寬度與高度，通常以 CSS 像素為單位。
### 2. 螢幕可使用區域
```javascript
window.screen.availWidth
window.screen.availHeight
```
表示扣除作業系統工作列、Dock 等區域後，可以使用的螢幕空間。
### 3. 瀏覽器網頁內容區域
如果要取得目前瀏覽器中，網頁可見內容區域的尺寸，可以使用：
```javascript
window.innerWidth
window.innerHeight
```
例如：
```javascript
console.log("目前網頁內容寬度：", window.innerWidth);
console.log("目前網頁內容高度：", window.innerHeight);
```
這個尺寸會隨著瀏覽器視窗大小改變，與整個螢幕尺寸不一定相同。
---
## 修改網頁標題
可以讀取或修改 `document.title`：
```javascript
console.log(document.title);
// 修改瀏覽器分頁標題
document.title = "標題已被 JavaScript 修改";
```
因此：
```javascript
window.document.title
```
就是透過 `window` 物件取得目前網頁的標題。
相關學習地圖、教學課程
F2E 網站前端工程