优先用textContent更新纯文本，更安全高效；需HTML格式时才用innerHTML并过滤用户输入；操作前须检查元素存在性；表单控件须直接赋值value等属性而非innerHTML或textContent。
直接改 textContent 还是 innerHTML？
想动态更新文字，优先用 textContent；要插入带标签的 HTML 片段，才用 innerHTML。前者更快、更安全，不会触发 HTML 解析或执行内联脚本；后者有 XSS 风险，尤其当内容来自用户输入时。
- 纯文本更新：
element.textContent = "新标题" - 需保留格式（如加粗、换行）：
element.innerHTML = "<strong>重点</strong>说明" - 用户输入必须过滤：
innerHTML前建议用DOMPurify.sanitize()或转义函数处理
找不到元素就报错？先确认节点是否存在
document.getElementById() 或 querySelector() 返回 null 时，后续调用 .textContent 会抛 TypeError: Cannot set properties of null。别假设 DOM 已就绪。
- 确保脚本在 DOM 加载后执行：把 JS 放在
</body>前，或监听DOMContentLoaded - 加存在性判断：
const el = document.querySelector("#status"); if (el) { el.textContent = "加载完成"; } - 用可选链操作符（ES2020+）：
document.querySelector("#status")?.textContent = "就绪"
批量更新多个元素，别反复查 DOM
循环里每次调用 querySelectorAll() 再遍历，性能差。查一次，存引用，再操作。
- 错误写法：
for (let i = 0; i < 5; i++) { document.querySelectorAll(".item")[i].textContent = `第${i}项`; } - 正确写法：
const items = document.querySelectorAll(".item"); items.forEach((el, i) => el.textContent = `第${i}项`); - 注意：
querySelectorAll返回的是NodeList，不是数组，但支持forEach；若需数组方法，用[...items]展开
修改表单控件值，别只改 DOM 属性
对 <input>、<textarea>、<select>，仅设 innerHTML 或 textContent 不生效。必须操作其对应属性：
立即学习“Java免费学习笔记（深入）”；
-
input.value = "新内容"（文本框、密码框等） textarea.value = "多行文本"-
select.value = "option-value"或select.selectedIndex = 1 - 如果用
setAttribute("value", ...)，只改了初始属性，不改变当前控件状态
