术中操作：遍历、属性与 DOM 修改
文档摘要
第 3 章 · 术中操作：遍历、属性与 DOM 修改 章节摘要：定位完成，手术正式开台。本章的四个科目对应四类术中动作：遍历是从已知元素出发在文档树里行走探查；属性操作是读写元素身上的档案（特性、属性、数据）；类名与样式操作是缝合时的两种针法——改类名走批量路线，改内联样式走精修路线；DOM 修改则是切除、移植与再造。读完本章，你能在标本页上完成从"查询"到"改造"的全套动作，并知道每个动作在原生世界对应的写法。 学习目标 读完本章，你应当能够： 用 、 、 、 等方法在 DOM 树上按需行走，并说出与层级选择器的分工。 区分特性（attribute）与属性（property），在 、 、 之间做正确选择。 用 读写表单控件的值，并解释它与 的差异。
第 3 章 · 术中操作：遍历、属性与 DOM 修改
章节摘要：定位完成，手术正式开台。本章的四个科目对应四类术中动作：遍历是从已知元素出发在文档树里行走探查；属性操作是读写元素身上的档案（特性、属性、数据）；类名与样式操作是缝合时的两种针法——改类名走批量路线，改内联样式走精修路线；DOM 修改则是切除、移植与再造。读完本章，你能在标本页上完成从"查询"到"改造"的全套动作，并知道每个动作在原生世界对应的写法。
学习目标
读完本章，你应当能够：
- 用
children、find、siblings、closest等方法在 DOM 树上按需行走，并说出与层级选择器的分工。 - 区分特性（attribute）与属性（property），在
attr、prop、data之间做正确选择。 - 用
val读写表单控件的值，并解释它与attr('value')的差异。 - 用类名方法与
css方法分别处理批量样式与单点样式，判断何时该用哪条路。 - 用追加、前置、包裹、克隆、移除五类方法改造文档结构，并对应到原生插入 API。
- 理解链式调用的成立条件，用
end在链上回退到上一个集合。
核心概念速览
本章有一个贯穿的公理：jQuery 集合是"查"的结果，遍历是"继续查"，修改是"对查到的人动手"。三类方法都返回 jQuery 对象，这正是链式调用的物理基础——每一环都还给你一件手术衣。
子章节导航
- 3.1 DOM 遍历：沿树行走的清扫路线——从集合出发的探查方法族，以及"行走后集合怎么变"的规则。
- 3.2 属性操作：读写病灶档案——attr、prop、data 三本档案的记载规则与读取时机。
- 3.3 CSS 与类名：两种缝合针法——类名走批量、样式走精修；与原生
classList的逐条对照。 - 3.4 DOM 修改：切除、移植与再造——五类结构手术，含克隆与移除的注意事项。
子章节之间的逻辑关系
3.1 遍历（把谁拿到手） │ ▼ 3.2 属性 / 3.3 类名样式（对拿到的元素改内容） │ ▼ 3.4 结构修改（把元素加进树、从树里换掉）
顺序即依赖：遍历决定操作对象，属性与样式是最常见的两种修改，结构修改则在树的位置上动刀。四节的方法都返回 jQuery 对象，学完任何一节都可以直接串进链式调用。
术中考核单：本章可考核的知识点
术中操作的验收标准是"给你一个标本页，你能完成指定的改造且不伤及无辜"。逐项核对：
| 考核项 | 判定动作 | 达标标准 |
|---|---|---|
| 遍历方法的集合语义 | 对三个匹配元素调 children() |
知道结果是三批子代的合集，不是只取第一个的 |
find 与 children 的深浅 |
分别用两法找后代 | 说得出 find 深挖所有层、children 只看一层 |
closest 的走向 |
从深层节点向上找 .panel |
知道它向上找最近祖先（含自身），与 parents 不同 |
| 特性与属性之辨 | attr('checked') 与 prop('checked') 各读一次 |
能解释初始值与当前状态的账本差异 |
data 的存取 |
data('role', 'x') 后再读 |
知道它走内部缓存，不写进 HTML 特性 |
val 的多面性 |
对 input、select、checkbox 分别取值 | 知道返回值形态随控件类型变化 |
| 类名与内联的分工 | 批量换肤与单点微调各做一次 | 说得出哪条路该用 toggleClass、哪条该用 css |
| 结构手术五式 | 追加、前置、包裹、克隆、移除各演练一次 | 注意 appendTo 方向反写与克隆不带事件的默认行为 |
链式与 end() 回退 |
在一条链上回退到上一个集合 | 能画出链上每一步的集合变化 |
最容易误判的是克隆：clone() 默认不带事件与数据，复制出的列表看起来一模一样，点上去却毫无反应——这是 3.4 节专门展开的手术事故。其次是 attr 读表单状态读到旧账，病根在特性与属性两本账的混淆，3.2 节会摆出对照实验。
常见误诊预告（本章版）
本章症状多表现为"改了没生效"或"改多了"：内联样式被样式表更高优先级压住、遍历返回合集导致批量误伤、包裹方向写反把容器装进了内容里。各节的"易错点"环节按症状给病理与改法，第 7 章的排查图谱会把它们收拢成速查表。
前置知识与后续延伸
前置：第 2 章的选择器与 jQuery 对象概念。本章不再重复"怎么选中"，只解决"选中之后做什么"。
往后走：第 4 章的事件绑定会大量使用本章的遍历方法（委托场景里 closest 是主角）；第 6 章 AJAX 拿到数据后的第一件事就是本章 3.4 节的结构修改——把服务端返回的内容拼进页面。