textcontent用于安全读写纯文本，忽略html标签且防xss；innerhtml则解析并渲染html结构，但有xss风险。
textContent 是 JavaScript 中用于读取或设置元素节点纯文本内容的属性，它会忽略 HTML 标签，只处理文本本身。
基本用法：设置纯文本内容
直接给元素的 textContent 赋值即可替换其所有子文本节点（包括后代文本），且自动转义 HTML 字符，防止 XSS：
- // 假设有一个 旧内容
- const box = document.getElementById('box');
- box.textContent = '新文本 <script>alert(1)</script>';
- // 页面显示：新文本 <script>alert(1)</script>
与 innerHTML 的关键区别
textContent 不解析 HTML，而 innerHTML 会解析并渲染标签：
- box.textContent = '加粗'; // 显示为字面量：加粗
- box.innerHTML = '加粗'; // 渲染为实际加粗的“加粗”
- textContent 更安全、性能略高（不触发 HTML 解析和重排）
读取文本内容（含隐藏元素）
textContent 会返回所有子节点的文本，包括被 display: none 或 visibility: hidden 隐藏的元素中的文字：
- 可见
- console.log(document.getElementById('demo').textContent); // 输出："可见隐藏文本"
- 如需仅获取可视文本，需配合
getComputedStyle过滤
注意事项
使用时需注意兼容性和行为细节：
- IE8+ 支持，现代浏览器无兼容问题
- 对表单元素（如
<input>、<textarea></textarea>）无效，应改用value - 设置空字符串
el.textContent = ''可清空元素所有子节点（比innerHTML = ''更轻量） - 不会触发 DOM 事件（如
input或change），适合静默更新
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
