在JavaScript中textContent和innerText之间的区别是什么?
我可以使用textContent如下:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
当前回答
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属性据说自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。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之间的关键区别在Kelly Norton的博客文章中很好地概述了:innerText vs. textContent。下面是摘要:
innerText was non-standard, textContent was standardized earlier. innerText returns the visible text contained in a node, while textContent returns the full text. For example, on the following HTML <span>Hello <span style="display: none;">World</span></span>, innerText will return 'Hello', while textContent will return 'Hello World'. For a more complete list of differences, see the table at http://perfectionkills.com/the-poor-misunderstood-innerText/ (further reading at 'innerText' works in IE, but not in Firefox). As a result, innerText is much more performance-heavy: it requires layout information to return the result. innerText is defined only for HTMLElement objects, while textContent is defined for all Node objects.
一定要看看这个答案下面的信息评论。
textContent在IE8-中不可用，裸金属填充看起来像一个在指定节点的所有childNodes上使用nodeValue的递归函数:
function textContent(rootNode) {
if ('textContent' in document.createTextNode(''))
return rootNode.textContent;
var childNodes = rootNode.childNodes,
len = childNodes.length,
result = '';
for (var i = 0; i < len; i++) {
if (childNodes[i].nodeType === 3)
result += childNodes[i].nodeValue;
else if (childNodes[i].nodeType === 1)
result += textContent(childNodes[i]);
}
return result;
}
