在JavaScript中textContent和innerText之间的区别是什么?

我可以使用textContent如下:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

当前回答

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

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

其他回答

除了其他答案中提到的所有差异之外,还有一个是我最近才发现的:

尽管innerText属性据说自2016年以来已经标准化,但它在浏览器之间表现出差异:Mozilla忽略了innerText中的U+200E和U+200F字符(“lrm”和“rlm”),而Chrome则不会。

console.log (. getelementbyid(“测试”).textContent.length); console.log (. getelementbyid(“测试”).innerText.length); < div id = "测试" > [& # x200E;] < / div >

Firefox报告3和2,Chrome报告3和3。

还不确定这是否是一个bug(如果是的话,在哪个浏览器中),或者只是我们不得不忍受的那些古怪的不兼容之一。

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

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

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.

大多数浏览器都支持textContent。ie8或更早版本不支持,但可以使用polyfill

textContent属性设置或返回指定节点及其所有子节点的文本内容。

参见http://www.w3schools.com/jsref/prop_node_textcontent.asp