textContent是唯一一个文本节点可用的:

var text = document.createTextNode('text'); console.log (text.innerText);/ /定义 console.log (text.textContent);/ /文本

在元素节点中，innerText计算<br>元素，而textContent计算控制字符:

var span = document.querySelector('span'); 跨度。innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8"; console.log (span.innerText);//上半场休息 console.log (span.textContent);//在下半场休息 < span > < / span >

跨度。innerText给实现:

1
2
3
4 5 6 7 8

跨度。textContent给:

1234
5
6
7
8

带有控制字符的字符串(例如换行符)在textContent中不可用，如果内容是用innerText设置的。另一种方式(设置控制字符与textContent)，所有字符返回innerText和textContent:

var div = document.createElement('div'); div.innerText = "x\ny"; console.log (div.textContent);/ / xy

对于那些在谷歌上搜索这个问题并来到这里的人。我觉得这个问题最明确的答案在MDN文档中:https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent。

你可以忘记所有让你困惑的要点，但要记住两件事:

当您试图更改文本时，textContent通常是您正在寻找的属性。 当您试图从某个元素中获取文本时，innerText近似于用户使用光标高亮显示元素内容并将其复制到剪贴板中所获得的文本。textContent提供了所有可见或隐藏的内容，包括<script>和<style>元素。

textContent是唯一一个文本节点可用的:

var text = document.createTextNode('text'); console.log (text.innerText);/ /定义 console.log (text.textContent);/ /文本

在元素节点中，innerText计算<br>元素，而textContent计算控制字符:

var span = document.querySelector('span'); 跨度。innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8"; console.log (span.innerText);//上半场休息 console.log (span.textContent);//在下半场休息 < span > < / span >

跨度。innerText给实现:

1
2
3
4 5 6 7 8

跨度。textContent给:

1234
5
6
7
8

带有控制字符的字符串(例如换行符)在textContent中不可用，如果内容是用innerText设置的。另一种方式(设置控制字符与textContent)，所有字符返回innerText和textContent:

var div = document.createElement('div'); div.innerText = "x\ny"; console.log (div.textContent);/ / xy

textContent返回全文，不关心可见性，而innerText则关心。

<p id="source">
    <style>#source { color: red; }</style>
    Text with breaking<br>point.
    <span style="display:none">HIDDEN TEXT</span>
</p>

textContent的输出:

#source { color: red; } Text with breakingpoint. HIDDEN TEXT

innerText的输出(注意innerText是如何意识到像<br>这样的标签，并忽略隐藏元素):

Text with breaking point.

document.querySelector('h1').innerText/innerHTML/textContent 

.querySelector (h1)。innerText -给我们里面的文本。它对当前正在显示的内容敏感，或者忽略正在隐藏的人员。

.querySelector (h1)。textContent -它类似于innerText，但它不关心显示的内容或实际显示给用户的内容。它会显示一切。

.querySelector (h1)。innerHTML = <i>sdsd</i> Will work* -检索完整的内容，包括标签名称。

与textContent相比，innerText的另一个有用的行为是换行符和相邻的多个空格将仅显示为一个空格，这可以更容易地比较字符串。

但取决于你想要什么，firstChild。nodeValue可能就足够了。