JS 获取 DOM 元素信息属性详解

在前端开发中，操作 DOM 元素的内容是日常任务之一。然而，面对 textContent、innerText、innerHTML、nodeValue 等属性，很多开发者常常混淆它们的用途和行为差异。本文将带你深入理解这些属性及方法的使用方式、性能差异与兼容性陷阱。

一、内容获取属性详解

属性/方法	是否解析 HTML	是否包含隐藏元素	备注
textContent	否	是	标准属性，推荐用于获取纯文本
innerText	否	否	会触发重排，非标准但兼容性好
innerHTML	是	是	可解析 HTML，存在 XSS 风险
nodeValue	否	是	适用于文本节点，元素节点返回 null

1. textContent：获取纯文本内容（推荐）

const div = document.querySelector('.box');
console.log(div.textContent); // 获取所有文本，包括 <script> 和 <style> 内容

• 包含隐藏元素（如 display: none）的文本
• 不解析 HTML，安全可靠
• 性能优于 innerText

2. innerText：获取“可见”文本（考虑样式）