在JavaScript中textContent和innerText之间的区别是什么?
我可以使用textContent如下:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
当前回答
innerText和textContent都是2016年标准化的。所有Node对象(包括纯文本节点)都有textContent，但只有HTMLElement对象有innerText。
虽然textContent适用于大多数浏览器，但不适用于IE8或更早版本。使用这个填充只在IE8上工作。此填充将不能与IE7或更早版本一起工作。
if (Object.defineProperty
&& Object.getOwnPropertyDescriptor
&& Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
&& !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
(function() {
var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
Object.defineProperty(Element.prototype, "textContent",
{
get: function() {
return innerText.get.call(this);
},
set: function(s) {
return innerText.set.call(this, s);
}
}
);
})();
}
Object.defineProperty方法在IE9或更高版本中可用，但在IE8中仅对DOM对象可用。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
其他回答
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
innerHTML甚至会执行HTML标签，这可能会导致任何类型的客户端注入攻击，如基于DOM的XSS。 下面是代码片段:
<!DOCTYPE html>
<html>
<body>
<script>
var source = "Hello " + decodeURIComponent("<h1>Text inside gets executed as h1 tag HTML is evaluated</h1>"); //Source
var divElement = document.createElement("div");
divElement.innerHTML = source; //Sink
document.body.appendChild(divElement);
</script>
</body>
</html>
如果使用. textcontent，它将不会计算HTML标记并将其打印为String。
<!DOCTYPE html>
<html>
<body>
<script>
var source = "Hello " + decodeURIComponent("<h1>Text inside will not get executed as HTML</h1>"); //Source
var divElement = document.createElement("div");
divElement.textContent = source; //Sink
document.body.appendChild(divElement);
</script>
</body>
</html>
参考:https://www.scip.ch/en/?labs.20171214
innerText和textContent都是2016年标准化的。所有Node对象(包括纯文本节点)都有textContent，但只有HTMLElement对象有innerText。
虽然textContent适用于大多数浏览器，但不适用于IE8或更早版本。使用这个填充只在IE8上工作。此填充将不能与IE7或更早版本一起工作。
if (Object.defineProperty
&& Object.getOwnPropertyDescriptor
&& Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
&& !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
(function() {
var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
Object.defineProperty(Element.prototype, "textContent",
{
get: function() {
return innerText.get.call(this);
},
set: function(s) {
return innerText.set.call(this, s);
}
}
);
})();
}
Object.defineProperty方法在IE9或更高版本中可用，但在IE8中仅对DOM对象可用。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
与textContent相比，innerText的另一个有用的行为是换行符和相邻的多个空格将仅显示为一个空格，这可以更容易地比较字符串。
但取决于你想要什么，firstChild。nodeValue可能就足够了。
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.
