第五章：交换策略与 DOM 操作
5.1 hx-swap 详解
hx-swap 控制服务器返回的 HTML 如何插入到页面中。它提供了精细的 DOM 操作能力。
基本交换方式
目标元素: <div id="target">原始内容</div>
| 值 | 效果 | 示例结果 |
|---|
innerHTML | 替换内部 HTML（默认） | <div id="target">[新内容]</div> |
outerHTML | 替换整个元素 | [新内容] |
textContent | 替换文本（HTML 转义） | <div id="target">新内容</div> |
beforebegin | 在元素前插入 | [新内容]<div id="target">...</div> |
afterbegin | 在内部开头插入 | <div id="target">[新内容]原始...</div> |
beforeend | 在内部末尾插入 | <div id="target">原始...[新内容]</div> |
afterend | 在元素后插入 | <div id="target">...</div>[新内容] |
delete | 删除目标元素 | |
| none | 不执行交换 | 原始内容 |
#### 实际代码示例
___CODE_BLOCK_1___
---
### 5.2 交换修饰符
#### swap - 交换延迟
___CODE_BLOCK_2___
#### settle - 稳定延迟
___CODE_BLOCK_3___
#### transition - 启用视图过渡
___CODE_BLOCK_4___
#### scroll - 滚动控制
___CODE_BLOCK_5___
#### show - 显示位置
___CODE_BLOCK_6___
#### focus-scroll - 焦点滚动
___CODE_BLOCK_7___
---
### 5.3 CSS 过渡动画
HTMX 提供了多个 CSS 类用于动画：
| 类名 | 时机 | 用途 |
|------|------|------|
| .htmx-request | 请求开始时添加 | 显示加载状态 |
| .htmx-swapping | 交换前添加 | 退出动画 |
| .htmx-added | 新内容添加后添加 | 进入动画 |
| .htmx-settling | 交换完成前 | 稳定动画 |
#### 完整动画示例
___CODE_BLOCK_8___
---
### 5.4 视图过渡 API
使用浏览器原生的 View Transitions API：
___CODE_BLOCK_9___
---
### 5.5 带外更新 (Out-of-Band)
一次请求更新多个区域：
___CODE_BLOCK_10___
后端返回：
___CODE_BLOCK_11___
#### 带外交换选项
___CODE_BLOCK_12___
---
### 5.6 hx-select 内容选择
从响应中提取特定部分：
___CODE_BLOCK_13___
---
### 5.7 多目标交换
一次请求更新多个目标：
___CODE_BLOCK_14___
或使用带外更新（推荐）：
___CODE_BLOCK_15___
---
### 5.8 交换策略速查表
| 策略 | 用法 | 场景 |
|------|------|------|
| innerHTML | 默认，替换内部 | 更新内容区域 |
| outerHTML | 替换整个元素 | 替换组件 |
| beforebegin | 元素前插入 | 添加前置内容 |
| afterbegin | 内部开头插入 | 列表顶部添加 |
| beforeend | 内部末尾插入 | 列表底部添加 |
| afterend | 元素后插入 | 添加后续内容 |
| delete | 删除元素 | 移除项目 |
| none | 不交换 | 仅触发请求 |
| swap:N | 延迟 N ms | 等待动画 |
| settle:N | 稳定延迟 | 动画完成 |
| transition | 视图过渡 | 页面切换 |
| scroll:top | 滚动到顶 | 长列表 |
| scroll:bottom | 滚动到底 | 聊天应用 |
| show:window:top | 显示顶部 | 页面导航 |
下一章预告：第六章将讲解 WebSocket 和服务器推送事件。
第五章完