优先用 textcontent 而非 innertext，因其行为确定、性能稳定、兼容性好，不因 css 隐藏丢内容；innertext 存在跨浏览器差异且触发重排；innerhtml 不应用于纯文本更新，以防 xss 和性能损耗。
直接用 textContent，别碰 innerText —— 除非你真需要它受 CSS 隐藏影响的“可见文本”逻辑。
为什么优先用 textContent 而不是 innerText
因为 textContent 行为确定、性能稳定、兼容性好，且不会因 display: none 或 visibility: hidden 意外丢内容。而 innerText 在 Chrome/Firefox 中对换行、空格处理不一致，还会触发重排（reflow），在循环更新或高频操作中容易卡顿。
-
textContent是 DOM 标准属性，所有现代浏览器支持，返回/设置全部文本节点内容（含注释里的文字） -
innerText是 IE 遗留扩展，Firefox 直到 2016 年才实现，至今仍存在跨浏览器差异 - 若元素内有
<span style="display:none">秘密</span>，innerText不会包含“秘密”，textContent会
innerHTML 该不该用来改纯文本？
不该。即使只是插入 "Hello" 这种字符串，用 innerHTML 也会让浏览器重新解析 HTML、重建子节点、丢弃事件监听器（比如已绑定的 click），开销远高于 textContent。
- 只有当你明确要插入带标签的内容（如
"<em>强调</em>"）时，才用innerHTML - 如果用户输入可能进页面（比如评论框提交后显示），
innerHTML会直接执行脚本标签，导致 XSS；textContent自动转义，天然安全 - 写法上：
el.textContent = "用户输入<script>alert(1)</script>"→ 页面显示原样字符串；el.innerHTML = ...→ 弹窗触发
常见标签（p、h1、span、div）怎么统一处理？
不用区分标签类型 —— 所有可包含文本的元素都支持 textContent，包括 button、li、option，甚至 script 和 style 标签本身（但别乱改后者）。
- 获取：直接读
el.textContent，比el.innerText或el.innerHTML更快更准 - 设置：赋值即可，
document.querySelector("h1").textContent = "新标题" - 注意：设空字符串
""会清空所有子节点（包括嵌套的span、strong），这不是 bug，是预期行为 - 如果只想替换文字但保留内部结构（比如只改
<p>你好 <span class="name">张三</span></p>里的“张三”），得用querySelector(".name").textContent = "李四"
动态更新时最容易被忽略的坑
不是语法错，而是时机和作用域问题 —— 尤其在异步或循环中。
- DOM 元素还没加载完就执行 JS：确保脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
