直接操作DOM更新ol的li文本最可靠，需用querySelectorAll限定范围并用textContent；CSS计数器适合纯样式编号；框架中应更新数据源而非DOM。
用 JavaScript 遍历 ol 的 li 并批量更新文本内容
直接操作 DOM 是最可靠的方式，尤其当列表项数量不定、内容需按规则生成时。原生 querySelectorAll 配合 forEach 能精准定位所有 li 子元素，避免误改嵌套结构里的其他列表。
常见错误是写成 document.querySelectorAll('ol li') 却没限定父容器，结果改了页面里所有有序列表的项——如果页面有多个 ol，必须加 ID 或 class 限定范围。
- 推荐写法：
document.querySelectorAll('#myList li')或ol.my-class > li（用>确保只选直接子项） - 更新文本优先用
textContent，不是innerHTML；除非你明确要插入 HTML 标签，否则后者有 XSS 风险且性能略差 - 若需按序号动态生成内容（如“第1项：xxx”），可用
forEach的第二个参数index，注意它是从 0 开始的，需 +1
const items = document.querySelectorAll('#taskList li');
items.forEach((item, i) => {
item.textContent = `任务 ${i + 1}：已处理`;
});
用 CSS 计数器配合伪元素实现“视觉上”的批量编号控制
如果你只是想统一调整编号样式（比如把 1. 2. 3. 改成 (1) (2) (3)），或者让编号文字和内容分离显示，CSS counter-reset 和 ::before 是更轻量的选择——它不修改 DOM，只影响渲染，适合纯展示场景。
容易踩的坑是忘记在 ol 上设 counter-reset，或在 li::before 里漏掉 counter-increment，导致所有项都显示同一个数字甚至不显示编号。
-
ol必须设counter-reset: item（名字可自定义） - 每个
li要设counter-increment: item -
li::before用content: "(" counter(item) ") "拼接前缀 - 此方法无法修改
li内的实际文本内容，仅改变编号外观
ol.custom-counter {
counter-reset: item;
}
ol.custom-counter li {
counter-increment: item;
}
ol.custom-counter li::before {
content: "(" counter(item) ") ";
color: #666;
}
用正则 + innerHTML 替换（仅限简单静态 HTML，慎用）
如果 ol 内容完全静态、无事件绑定、无复杂子结构，且你只是做一次性查找替换（比如把所有 “旧标题” 换成 “新标题”），可以直接操作 innerHTML 字符串。但这是高风险操作，DOM 结构会被重建，所有绑定的事件监听器、表单输入值、焦点状态都会丢失。
典型翻车场景：替换后发现点击事件没了，或者 input 框里的用户输入被清空——因为整个 li 被字符串替换重绘了。
- 仅适用于服务端渲染后的一次性前端修补，或调试时快速验证
- 必须确保正则足够精确，例如用
- ([^
- 替换后记得重新绑定事件（如果原来有），或改用事件委托方式提前注册
Vue/React 等框架中批量更新的正确姿势
在响应式框架里，不要手动查 DOM 改 li，而是更新驱动列表的数据源。比如 Vue 中改 v-for 绑定的数组，React 中调用 setState 更新 listItems 数组——框架会自动 diff 并高效重渲染对应项。
最容易忽略的是：直接对数组做 push/pop 是响应式的，但通过索引赋值（arr[0] = 'new'）或修改 length 在 Vue 2 中不会触发更新；React 则要求用不可变方式（map 返回新数组）。
- Vue 2：用
this.$set(items, index, newValue)或splice替代索引赋值 - Vue 3 / React：用
items.map((item, i) => i === targetIndex ? newItem : item)生成新数组 - 避免在模板中写复杂逻辑，把批量处理逻辑抽到 methods 或 useMemo/useCallback 里
真正麻烦的不是“怎么改”，而是改完之后有没有副作用——事件是否还在、焦点是否错乱、屏幕阅读器能否正确播报新内容、SEO 是否受影响。批量操作前，先确认你改的是数据还是视图，再选对应层级的工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
