textContent可安全高效获取或设置节点纯文本内容,包含隐藏元素及script/style内文本,自动转义HTML字符;但对input等表单元素无效,应使用value属性。

直接用 textContent 属性就能快速设置或获取节点的纯文本内容,无需解析 HTML,不触发重排,也天然防 XSS。
获取纯文本内容
调用元素的 textContent 属性即可读取该元素及其所有后代节点中的全部文本(含空格、换行,会自动合并连续空白):
- 隐藏元素(
display: none或visibility: hidden)里的文字也会被包含 - 不区分标签类型,
<script>、<style>里的文本同样返回 - 对
document.body使用时,可一次性提取整页可见文本(不含 HTML 结构)
设置纯文本内容
给 textContent 赋值,会清空原节点所有子节点(包括标签、注释、子元素),只保留一个纯文本节点:
- 赋值内容中的 HTML 字符(如
<b>、<script>)会被自动转义,作为字面量显示 - 适合更新提示文案、状态栏、日志区域等纯展示场景
- 比
innerHTML = ''更轻量,清空内容时推荐用el.textContent = ''
注意不能用的特殊情况
textContent 对某些表单控件无效,因为它们的内容由 value 属性管理:
立即学习“Java免费学习笔记(深入)”;
-
<input>、<textarea>、<select>应改用.value -
document或DocumentFragment等非元素节点上使用会返回null或报错 - IE8+ 全面支持,现代浏览器无兼容顾虑
和 innerText、innerHTML 的关键区别
避免混淆,三者用途明确:
-
textContent:按 DOM 树结构取/设所有文本,不管是否渲染,安全高效 -
innerText:只取当前 CSS 渲染出的可见文本,受样式影响,性能略低 -
innerHTML:解析并渲染 HTML 字符串,功能强但有 XSS 风险,需自行过滤


















