在前端开发中，操作 DOM 元素的内容是日常任务之一。然而，面对 textContent、innerText、innerHTML、nodeValue 等属性，很多开发者常常混淆它们的用途和行为差异。本文将带你深入理解这些属性及方法的使用方式、性能差异与兼容性陷阱。
一、内容获取属性详解
| 属性/方法 | 是否解析 HTML | 是否包含隐藏元素 | 备注 |
|---|
textContent | 否 | 是 | 标准属性，推荐用于获取纯文本 |
innerText | 否 | 否 | 会触发重排，非标准但兼容性好 |
innerHTML | 是 | 是 | 可解析 HTML，存在 XSS 风险 |
nodeValue | 否 | 是 | 适用于文本节点，元素节点返回 null |
1. textContent：获取纯文本内容（推荐）
const div = document.querySelector('.box');
console.log(div.textContent);
- 包含隐藏元素（如
display: none）的文本
- 不解析 HTML，安全可靠
- 性能优于
innerText
2. innerText：获取“可见”文本（考虑样式）
console.log(div.innerText);
- 会触发重排（reflow），性能差
- 忽略
display: none 和 visibility: hidden 的元素
- 更贴近用户实际看到的文本
3. innerHTML：获取或设置 HTML 字符串
console.log(div.innerHTML);
div.innerHTML = '<span>新内容</span>';
- 存在 XSS 风险，避免直接插入用户输入
- 适合动态渲染 HTML 模板
4. nodeValue：用于文本节点
const textNode = div.firstChild;
console.log(textNode.nodeValue);
- 性能高，仅适用于文本节点
- 对元素节点返回
null
二、属性获取方法详解
1. getAttribute()：获取任意属性值
const link = document.querySelector('a');
console.log(link.getAttribute('href'));
- 可获取自定义属性（如
data-*）
- 返回字符串，即使属性是布尔值（如
disabled）
2. dataset：获取 data-* 自定义属性
<div id="user" data-id="123" data-role="admin"></div>
<script>
const user = document.getElementById('user');
console.log(user.dataset.id);
console.log(user.dataset.role);
</script>
- 语法简洁，自动驼峰化（如
data-user-name → dataset.userName）
- 仅适用于
data-* 属性
3. 直接属性访问（如 href、src）
const img = document.querySelector('img');
console.log(img.src);
三、实战建议与最佳实践
| 场景 | 推荐方式 |
|---|
| 获取纯文本内容 | textContent |
| 获取用户可见文本 | innerText（注意性能） |
| 动态插入 HTML | innerHTML（务必转义用户输入） |
| 获取自定义属性 | dataset（data-*）或 getAttribute() |
| 获取标准属性 | 直接访问属性（如 img.src） |
四、总结速记口诀
- 文本用
textContent，可见用 innerText；
- HTML 用
innerHTML，节点用 nodeValue；
- 属性用
getAttribute，自定义用 dataset。
五、附录：速查表（保存备用）
| 目标 | 方法/属性 |
|---|
| 获取所有文本（含隐藏） | textContent |
| 获取可见文本 | innerText |
| 获取 HTML 字符串 | innerHTML |
| 获取文本节点内容 | nodeValue |
| 获取任意属性 | getAttribute() |
获取 data-* 属性 | dataset |
| 获取标准属性 | .src、.href 等 |
