textContent用于安全修改纯文本，自动转义防XSS；innerHTML用于插入带标签的HTML结构，但有注入风险；表单元素用value属性；firstChild.data仅适用于单一文本节点的精确控制。
直接用 textContent 改纯文本，用 innerHTML 插入或替换带标签的结构——这是最常用、最明确的两种方式。
修改纯文本内容：用 textContent 最安全
textContent 只处理文字，不解析 HTML 标签，自动转义尖括号，天然防 XSS，性能也更好。
- 设置文本：
element.textContent = "欢迎回来"，原有内容（包括子元素）全被替换为纯文本 - 追加文本：
element.textContent += "！"，在原内容末尾拼接新字符串 - 读取文本：
const txt = element.textContent，返回所有子节点的文本合并结果，含空格与换行
插入或替换 HTML 结构：用 innerHTML
innerHTML 能识别并渲染 HTML 标签，适合动态生成带格式的内容，但必须确保内容可信。
- 覆盖整个内容：
element.innerHTML = "<strong>重要通知</strong><br>请查收"
- 追加结构：
element.innerHTML += "<div class="tip">提示信息</div>" - 注意：重复设置 innerHTML 会销毁原有子元素上的事件监听器，且存在注入风险——用户输入务必先过滤或使用 textContent 替代
表单元素的值：单独用 value 属性
input、textarea、select 这类表单控件，文本内容和显示值由 value 控制，和 textContent/innerHTML 无关。
立即学习“Java免费学习笔记（深入）”；
input.value = "默认填写内容"textarea.value = "多行文本\n可包含换行"- 读取用户当前输入：
const userInput = input.value
需要精确控制首层文本节点时：用 firstChild.data
当元素内只有单一文本节点（无子元素），且你想绕过 textContent 的“合并所有子文本”行为，可用底层方式：
element.firstChild?.data = "仅改第一段文本"- 前提是
element.firstChild确实是 Text Node（可通过nodeType === 3判断） - 不推荐日常使用，适合特殊场景，比如保留某些嵌套结构中特定位置的纯文本
