1. textContent 的作用与基本用法
1.1 textContent 的定义与行为
textContent 是 DOM 节点对象的一个属性，返回当前节点及其所有子孙节点的文本内容。它不解析或执行任何 HTML 标签，只是把文本节点的内容拼接起来，形成一个字符串。通过它可以快速获取元素中的纯文本。这意味着任意嵌套的标签里包含的文本都会被拼接在一起，但不会把标签本身解析成 HTML。
在读取时，如果节点内部存在换行、空格或隐藏文本节点，这些文本也会被计入返回值，因此得到的文本可能包含额外的空白字符。理解这一点对于后续的文本处理很重要。
1.2 与 innerText、innerHTML 的对比
与 innerText 相比，textContent 不会考虑渲染后的可见性，不会执行 CSS 导致的隐藏文本过滤，也不会触发对布局的计算。innerText 依赖于布局与渲染，可能会舍弃不可见文本，因此在获取显示文本时有差异。
与 innerHTML 相比，textContent 纯粹返回文本，不包含任何 HTML 标记。如果你只需要文本，不需要 HTML 结构，使用 textContent 可以避免 XSS 风险并提升性能。
2. 文本读取与写入的实际场景
2.1 读取文本内容的典型场景
当你需要获得一个容器内的所有文本作为数据进行分析、搜索或统计时，textContent 是首选的文本提取 API。例如从一个文章预览区域提取标题与摘要，或者从一个注释区取出用户的原始输入进行文本处理。
注意，文本中包含的换行和空格可能需要在后续处理中进行清理（如.trim()、正则替换等），以获得稳定的文本结果。
// 读取容器中的纯文本
const container = document.querySelector('.article');
const text = container.textContent; // 取出所有文本
console.log(text);
2.2 向元素写入纯文本的场景
当需要将用户输入或任意文本安全地插入到页面中，而不是渲染 HTML 时，textContent 赋值可以避免执行潜在的脚本，从而降低 XSS 风险。这是处理用户提交的文本、论坛帖子等场景的推荐做法。
通过 直接设置 textContent，浏览器会把文本转换为文本节点，任何标签都会被视为普通文本呈现。
// 将用户输入作为纯文本插入到页面
const userInput = "";
const output = document.getElementById('output');
output.textContent = userInput; // 显示为文本，而非执行脚本
3. 性能与兼容性要点
3.1 性能考量：读取与写入的成本
在需要频繁读取或写入大量文本时，textContent 的实现通常比 innerHTML 更高效，因为它不需要解析 HTML、创建或销毁 DOM 节点，仅仅操作文本节点。对高频场景，这种差异可能累积成明显的性能收益。
在微观层面，避免不必要的 DOM 变动，配合节流/去抖策略，可以让 UI 更新更加顺畅。
3.2 浏览器兼容性与边界情况
几乎所有现代主流浏览器都对 textContent 提供了良好支持，但在兼容性极古老的环境中需要留意。对于 SVG、DocumentFragment 等节点，textContent 的行为是一致的，但某些旧版浏览器的实现细节可能有差异。
当你需要跨平台输出稳定文本时，可以结合 trim、replace 和正则表达式，以消除不可控空白和控制字符。
4. 常见误解与正确用法
4.1 误解一：textContent 会将 HTML 解析成结构
这个误解会让人错误地使用 textContent 去替换 innerHTML，从而无法插入 HTML 结构。textContent 只处理文本，不会创建新的 DOM 元素或标签。
如果你需要添加按钮、链接等交互元素，应该使用 innerHTML 或 DOM API（创建节点、appendChild 等）来构建结构，然后再根据信息安全进行编码。
// 错误用法示例（不要用 textContent 插入 HTML）
// 这样的赋值不会创建按钮
element.textContent = "<button>点我</button>"; // 显示为文本，不是按钮
4.2 误解二：文本中多余的空格和换行总是需要消除
虽然在很多场景下需要清理空白，但 文本内容原封不动地保留可帮助你还原用户的原始输入。只有在展示给用户时，才需要进行格式化和美化处理。
通常的做法是先读取 textContent，再通过 trim、replace 去除多余空格或按段落拆分处理。
// 去除首尾空白并按换行分段
const raw = element.textContent;
const lines = raw.trim().split(/\\r?\\n+/);
console.log(lines);
