注意，在谷歌Chrome中，Element::innerText属性将不包含被CSS样式“display:none”隐藏的文本(以及它将删除被其他CSS技术掩盖的内容(包括font-size:0, color:transparent，以及其他一些导致文本不以任何可见方式呈现的类似效果)。

其他CSS属性也被考虑:

First the "display:" style of inner elements is parsed to determine if it delimits a block content (such as "display:block" which is the default of HTML block elements in the browser's builtin stylesheet, and whose behavior as not been overriden by your own CSS style); if so a newline will be inserted in the value of the innerText property. This won't happen with the textContent property. The CSS properties that generate inline contents will also be considered : for example the inline element <br \> that generates an inline newline will also generate an newline in the value of innerText. The "display:inline" style causes no newline either in textContent or innerText. The "display:table" style generates newlines around the table and between table rows, but"display:table-cell" will generate a tabulation character. The "position:absolute" property (used with display:block or display:inline, it does not matter) will also cause a line break to be inserted. Some browsers will also include a single space separation between spans

但是Element::textContent仍然包含独立于应用CSS的内部文本元素的所有内容，即使它们是不可见的。textContent中不会生成额外的换行符或空格，它只是忽略了内部元素的所有样式和结构以及内联/块或定位类型。

使用鼠标选择的复制/粘贴操作将丢弃放在剪贴板中的纯文本格式的隐藏文本，因此它不会包含textContent中的所有内容，而只包含innerText中的内容(如上所述，在空格/换行生成之后)。

这两个属性然后在谷歌Chrome支持，但他们的内容可能会有所不同。旧的浏览器仍然包含在innetext的一切，就像textContent现在所包含的(但他们的行为与当时产生的空白/换行符是不一致的)。

jQuery将通过将".text()"方法添加到它通过$()查询返回的已解析元素中来解决浏览器之间的这些不一致。在内部，它通过查看HTML DOM来解决困难，只处理“节点”级别。它会返回一些看起来更像标准textContent的东西。

需要注意的是，这个jQuery方法不会插入任何额外的空格或换行符，这些空格或换行符可能是由内容的子元素(如<br />)引起的，在屏幕上可见。

如果您设计了一些可访问性脚本，并且您的样式表解析为非听觉呈现，例如用于与盲文阅读器通信的插件，如果它必须包括特定的标点符号，这些标点符号被添加到具有“display:none”样式的span中，并且通常包含在页面中(例如上标/下标)，则该工具应该使用textContent，否则在盲文阅读器上innerText将非常混乱。

Texts hidden by CSS tricks are now typically ignored by major search engines (that will also parse the CSS of your HTML pages, and will also ignore texts that are not in contrasting colors on the background) using an HTML/CSS parser and the DOM property "innerText" exactly like in modern visual browsers (at least this invisible content will not be indexed so hidden text cannot be used as a trick to force the inclusion of some keywords in the page to check its content) ; but this hidden text will be stil displayed in the result page (if the page was still qualified from the index to be included in results), using the "textContent" property instead of the full HTML to strip the extra styles and scripts.

IF you assign some plain-text in any one of these two properties, this will overwrite the inner markup and styles applied to it (only the assigned element will keep its type, attributes and styles), so both properties will then contain the same content. However, some browsers will now no longer honor the write to innerText, and will only let you overwrite the textContent property (you cannot insert HTML markup when writing to these properties, as HTML special characters will be properly encoded using numeric character references to appear literally, if you then read the innerHTML property after the assignment of innerText or textContent.

从2016年的Firefox v45开始，innerText在Firefox上工作，看看它的支持:http://caniuse.com/#search=innerText

如果希望它能在以前版本的Firefox上运行，可以使用textContent，它在Firefox上有更好的支持，但在较旧的IE版本上更差:http://caniuse.com/#search=textContent

也可以在其他浏览器中模拟innerText行为:

 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }

更新:我写了一篇博客文章，详细介绍了所有的区别。

Firefox使用W3C标准Node::textContent，但它的行为与MSHTML的专有内层文本(在几十个其他MSHTML特性中也被Opera复制了一段时间)“略有不同”。

首先，textContent的空白表示不同于innerText。其次，更重要的是，textContent包含所有SCRIPT标记内容，而innerText不包含。

只是为了让事情更有趣，Opera -除了实现标准的textContent -决定还添加MSHTML的innerText，但将其更改为textContent -即包括SCRIPT内容(事实上，textContent和innerText在Opera中似乎产生相同的结果，可能只是别名彼此)。

textContent是Node接口的一部分，而innerText是HTMLElement的一部分。例如，这意味着你可以从文本节点中“检索”textContent，但不能检索innerText:

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

最后是Safari 2。x也有bug的innerText实现。在Safari中，只有当元素为时，innerText才能正常工作 没有隐藏(通过风格。Display == "none")或从文档中孤立。否则，innerText结果为空字符串。

我正在使用textContent抽象(以解决这些缺陷)，但结果证明它相当复杂。

最好的办法是先定义您的确切需求，然后从那里开始。通常可以简单地从元素的innerHTML中剥离标签，而不是处理所有可能的textContent/innerText偏差。

当然，另一种可能是遍历DOM树并递归地收集文本节点。

根据Prakash K的回答，Firefox不支持innerText属性。所以你可以简单地测试用户代理是否支持这个属性，并按照下面的步骤进行:

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

像这样的东西怎么样?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

**我需要把我的大写。