应根据内容类型选择 innerHTML 或 textContent：innerHTML 用于可信的结构化 HTML，但会清空事件监听器；textContent 用于纯文本防 XSS；表单控件用 value 属性；动态样式优先用 classList；操作前需确保 DOM 已加载。
innerHTML 和 textContent 是最常用、最直接的两个方法，但选错会导致 XSS 漏洞、事件丢失或样式异常——关键不是“能不能改”，而是“该用哪个改”。
用 innerHTML 插入含标签的内容时，必须确认来源可信
它会把字符串当作 HTML 解析并渲染，适合插入结构化内容（比如带 <strong> 或列表的富文本），但也会清空原有子节点和绑定的所有事件监听器。
- 如果目标元素内有通过
addEventListener绑定的按钮点击逻辑，element.innerHTML = "..."后那些点击就失效了 - 用户输入的数据（如评论、表单值）绝不能直接拼进
innerHTML，否则可能执行恶意脚本 - 想保留原有部分结构再追加？用
element.insertAdjacentHTML("beforeend", "...")更安全，不重置整个子树
用 textContent 更新纯文本，防 XSS 且性能更好
它只处理文本节点，所有 HTML 字符（如 <、&）会被自动转义，适合显示用户输入、状态提示、数字计数等场景。
-
element.textContent = "<script>alert(1)</script>"会原样显示为字符串，不会执行 - 比
innerHTML渲染快，尤其在大量文本更新时（如日志滚动、实时消息） - 注意：
innerText受 CSSdisplay: none或visibility: hidden影响，而textContent不受，行为更可预测
修改表单控件内容要用 value，不是 innerHTML
<input>、<textarea>、<select> 这类元素的显示值由其 value 属性控制，改 innerHTML 完全无效。
立即学习“前端免费学习笔记（深入）”；
-
document.querySelector("input").value = "新输入值"才生效 -
<textarea>同样用value，不是textContent（虽然textContent能读取初始值，但写入不触发控件更新） -
<select>改选中项：直接设selectElement.value = "option-value"，或设selectElement.selectedIndex = 2
动态改样式优先用 classList，少碰 style 和 className
直接操作 style 属性只能加内联样式，难维护；className 是字符串替换，容易误删其他类；classList 是现代标准，精准可控。
- 添加类：
element.classList.add("active", "highlight") - 移除类：
element.classList.remove("disabled") - 切换类：
element.classList.toggle("hidden")（存在则删，不存在则加） - 检查类：
element.classList.contains("error")返回布尔值，可用于条件逻辑
真正容易被忽略的点是：改内容前是否需要等待 DOM 加载完成？如果脚本放在 <head> 里，document.getElementById 可能返回 null。确保操作在 DOMContentLoaded 事件后执行，或把 script 标签移到 </body> 前。
