firefox 下 'innerText' works in IE, but not in Firefox

Summary

Gets or sets the text content of a node and its descendents.

Syntax

var text = element.textContent;
element.textContent = "this is some sample text";

Description

  • textContent returns null if the element is a document, a document type, or a notation. To grab all of the text and CDATA data for the whole document, one could use document.documentElement.textContent.
  • If the node is a CDATA section, a comment, a processing instruction, or a text node, textContent returns the text inside this node (the nodeValue).
  • For other node types, textContent returns the concatenation of the textContentattribute value of every child node, excluding comments and processing instruction nodes. This is an empty string if the node has no children.
  • Setting this property on a node removes all of its children and replaces them with a single text node with the given value.

Differences from innerText

Internet Explorer introduced element.innerText. The intention is pretty much the same with a couple of differences:

  • Note that while textContent gets the content of all elements, including <script>and <style> elements, the mostly equivalent IE-specific property, innerText, does not.
  • innerText is also aware of style and will not return the text of hidden elements, whereas textContent will.
  • As innerText is aware of CSS styling, it will trigger a reflow, whereastextContent will not.

Differences from innerHTML

innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTMLtextContent should be used instead. Since the text is not processed it's likely to have better performance. Moreover, this avoids an XSS vector attack.

Example

// Given the following HTML fragment:
//   <div id="divA">This is <span>some</span> text</div>

// Get the text content:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// Set the text content:
document.getElementById("divA").textContent = "This is some text";
// The HTML for divA is now:
//   <div id="divA">This is some text</div>
 
 

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1+ (Yes) 9 (Yes) (Yes)






var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值