在JavaScript中textContent和innerText之间的区别是什么?
我可以使用textContent如下:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
当前回答
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
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
document.querySelector('h1').innerText/innerHTML/textContent
.querySelector (h1)。innerText -给我们里面的文本。它对当前正在显示的内容敏感，或者忽略正在隐藏的人员。
.querySelector (h1)。textContent -它类似于innerText，但它不关心显示的内容或实际显示给用户的内容。它会显示一切。
.querySelector (h1)。innerHTML = <i>sdsd</i> Will work* -检索完整的内容，包括标签名称。
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
