最安全改DOM数字的方式是直接修改textContent；应避免用innerHTML以防格式破坏或XSS，用dataset存真值、textContent仅作展示，input则必须改value属性。
直接改 textContent 最安全，别碰 innerHTML
DOM 里数字通常是纯文本内容（比如 12），想改它，最直接的方式就是定位元素后赋值 textContent。用 innerHTML 看似也能改，但只要数字前后有空格、换行或隐藏字符，就可能意外清空格式、触发重渲染，甚至执行 script（如果内容被污染）。
常见错误现象：element.innerHTML = 42 后，父容器样式错乱、事件监听器丢失、或者数字显示成 “42” 但实际 DOM 结构多了个换行。
- 用
document.getElementById("count").textContent = String(num)，显式转字符串更可控 - 如果数字来自计算，先判断是否为有效数字：
if (!isNaN(num) && isFinite(num)) { ... } - 避免
+=拼接：el.textContent += 1实际是字符串拼接，"12" + 1得到"121"
用 dataset 存原始数值，textContent 只管展示
当你要频繁增减、比较、格式化数字（比如计数器、价格、进度值），DOM 文本只是“快照”，真值应该存在内存或 dataset 里。否则每次读取都要 parseInt(el.textContent)，容易因空格、单位（如 “12px”）、逗号（“1,234”）出错。
使用场景：按钮点击加一、接口返回新值需覆盖旧值、需要保留小数精度但展示四舍五入。
- 初始化时存真值：
el.dataset.value = "12.5"; el.textContent = "12.5"; - 更新时同步两处：
const newVal = parseFloat(el.dataset.value) + 1; el.dataset.value = String(newVal); el.textContent = newVal.toFixed(1); -
dataset值始终是字符串，读取务必用parseFloat或parseInt，别信+el.dataset.value—— 遇到空字符串会得NaN
遇到 input type="number"，改 value 而不是 textContent
input 是表单控件，它的显示内容由 value 属性控制，textContent 对它完全无效。设了 textContent 看似变了，其实是浏览器在渲染时 fallback 显示的 placeholder 行为，后续任何交互（如 focus/blur）都会把它清掉。
错误现象：input.textContent = "42" 后，控制台看 DOM 没变；点一下输入框，数字立刻消失。
- 必须用
input.value = String(num)，且注意类型：传数字会自动转字符串，但null或undefined会导致清空 - 如果要保留小数位或格式（如带千分位），
value只接受纯数字字符串，格式化得靠 JS 手动处理后再赋值 - 改完记得触发
input事件（如需响应式框架监听）：input.dispatchEvent(new Event("input", { bubbles: true }));
批量更新多个数字节点？用 querySelectorAll + forEach，别手写 for 循环
页面上有十几个价格、库存、评分数字要统一更新（比如汇率变动后全部乘以系数），手动 getElementById 十几次既慢又难维护。用 CSS 选择器一次捞出，再遍历是最自然的做法。
性能影响：现代浏览器 querySelectorAll 返回的是静态 NodeList，forEach 安全可靠；老式 for (let i = 0; i 容易漏掉 let 导致闭包问题。
- 给所有数字节点加统一 class：
99 - 批量更新：
document.querySelectorAll(".price-num").forEach(el => { el.textContent = Math.round(parseFloat(el.textContent) * rate); }); - 注意兼容性：
NodeList.forEach在 IE 不支持，如需兼容，用Array.from(list).forEach(...)或传统 for 循环
真正麻烦的不是改数字，而是数字从哪来、要不要参与计算、要不要响应用户输入。DOM 文本只是结果，别让它反客为主。每次伸手改 textContent 前，先问一句：这个值，我下次读的时候还能无损还原吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
