# 2.3.2 操縱DOM
### 2.3.2 操縱DOM
在前面HTML的部分我們已經介紹了[DOM](dom.html),并且提到了通過JavaScript可以操縱HTML文檔的DOM樹。以上示例的JavaScript代碼也展示了這一點:
```
var btn = document.getElementById('btn1');
btn.onclick = function() {
document.body.innerHTML = '<h1>你好,JavaScript!</h1>';
};
```
其中,document對象代表整個HTML文檔,也是DOM樹的根節點。通過它的方法
```
getElementById
```
我們得到了代表button元素的對象,保存在變量btn里。
接著,我們給button元素的onclick屬性賦值,一個函數。這實際上是給“事件”注冊“回調函數”:當button被按下的時候,相應的函數就會被執行。在這個函數里我們又一次修改了DOM:body的內容被替換成了
```
<h1>你好,JavaScript!</h1>
```
讀者可在瀏覽器的調試器下觀察一下DOM樹前后的變化。
通過操縱DOM,JavaScript使網頁“動”了起來。
- 前言
- 1 Web概述
- 1.1 什么是Web
- 1.2 超文本和超鏈接
- 1.3 URL
- 1.4 DNS
- 1.5 HTTP
- 1.5.1 客戶端請求
- 1.5.2 服務器應答
- 1.5.3 進一步了解HTTP
- 1.6 HTTPS
- 2 Web瀏覽器
- 2.1 HTML
- 2.1.1 文檔類型聲明
- 2.1.2 標簽和屬性
- 2.1.3 文檔結構
- 2.1.4 DOM
- 2.1.5 進一步了解HTML
- 2.2 CSS
- 2.2.1 樣式與樣式表
- 2.2.2 樣式表語法
- 2.2.3 級聯樣式表
- 2.2.4 進一步了解CSS
- 2.3 JavaScript
- 2.3.1 script標簽
- 2.3.2 操縱DOM
- 2.3.3 jQuery
- 2.3.4 進一步了解JavaScript
- 2.4 Ajax
- 2.5 移動設備與響應式Web設計
- 3 Web服務器
- 3.1 方法與資源
- 3.2 狀態代碼
- 3.3 靜態內容與動態內容
- 3.4 編程語言與技術
- 3.4.1 CGI
- 3.4.2 PHP
- 3.4.3 Java
- 3.4.4 Python
- 3.4.5 Ruby
- 3.4.6 Node.js
- 3.5 RESTful Web API
- 3.6 服務器架構
- 3.7 Web緩存
- 3.8 服務器推送
- 4 數據庫
- 4.1 關系型數據庫
- 4.2 NoSQL數據庫
- 5 Web服務器的其他組件
- 5.1 Cron
- 5.2 消息隊列
- 5.3 郵件服務器
- 6 開發工具與技術
- 6.1 Git
- 6.1.1 Git基礎操作
- 6.1.2 Git基本原理
- 6.1.3 進一步了解Git
- 6.2 敏捷開發