在JavaScript中textContent和innerText之间的区别是什么?
我可以使用textContent如下:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
在JavaScript中textContent和innerText之间的区别是什么?
我可以使用textContent如下:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
当前回答
大多数浏览器都支持textContent。ie8或更早版本不支持,但可以使用polyfill
textContent属性设置或返回指定节点及其所有子节点的文本内容。
参见http://www.w3schools.com/jsref/prop_node_textcontent.asp
其他回答
大多数浏览器都支持textContent。ie8或更早版本不支持,但可以使用polyfill
textContent属性设置或返回指定节点及其所有子节点的文本内容。
参见http://www.w3schools.com/jsref/prop_node_textcontent.asp
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* -检索完整的内容,包括标签名称。
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;
}
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.