& # 39; innerText& # 39;可以在IE中运行，但不能在Firefox中运行

我有一些JavaScript代码，在IE中包含以下内容:

myElement.innerText = "foo";

然而，'innerText'属性似乎在Firefox中不起作用。Firefox中有类似的吗?或者是否可以使用更通用的跨浏览器属性?

230918 次浏览
小开
最佳答案

Firefox使用W3C-compliant textContent属性。

我猜Safari和Opera也支持这个属性。

小开

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

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

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

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

首先，textContent的空格表示不同于innerText。第二，也是更重要的，textContent 包含所有SCRIPT标记内容，而innerText没有。

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

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只有在元素为时才能正常工作 既没有隐藏(通过style.display == "none")也没有从文档中孤立出来。否则，innerText将导致空字符串

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

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

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

小开

如果您只需要设置文本内容而不需要检索，这里有一个简单的DOM版本，您可以在任何浏览器上使用;它既不需要IE的innerText扩展，也不需要DOM Level 3 Core textContent属性。

function setTextContent(element, text) {
while (element.firstChild!==null)
element.removeChild(element.firstChild); // remove all existing content
element.appendChild(document.createTextNode(text));
}
小开

jQuery提供了一个可以在任何浏览器中使用的.text()方法。例如:

$('#myElement').text("Foo");
小开

这是我对innerText， textContent， innerHTML和value的经验:

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

ie = ie, ff = firefox, ch =谷歌chrome。 注1:ff工作直到值被backspace删除-见Ray Vega上面的注释。 注2:工作在chrome -更新后，它是不变的，然后你点击离开，点击回到字段和值出现。 其中最好的是elem.value = changeVal;

小开

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

其他CSS属性也被考虑:

  • 首先，内部元素的“display:”样式被解析，以确定它是否分隔块内容(例如“display:block”是浏览器内置样式表中HTML块元素的默认值，并且其行为没有被您自己的CSS样式覆盖);如果是这样，将在innerText属性的值中插入换行符。textContent属性不会发生这种情况。
  • 生成内联内容的CSS属性也将被考虑:例如，生成内联换行符的内联元素<br \>也将在innerText的值中生成换行符。
  • "display:inline"样式在textContent或innerText中都不会产生换行符。
  • "display:table"样式在表周围和表行之间生成换行符，但"display:table-cell"将生成制表字符。
  • "position:absolute"属性(与display:block或display:inline一起使用，没关系)也会导致插入换行符。
  • 一些浏览器还将在span之间包含单个空格分隔

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

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

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

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

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

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

文本被CSS技巧现在通常被主要的搜索引擎(这也将解析HTML页面的CSS,和也会忽略文本不对比色的背景)使用HTML / CSS解析器和DOM属性“innerText”实现在现代视觉浏览器完全一样(至少这无形的内容不会被索引不能使用隐藏文本作为一个伎俩迫使包含一些关键字的页面检查其内容);但是这个隐藏的文本仍然会显示在结果页面中(如果该页面仍然从索引中被包含在结果中)，使用“textContent”属性而不是完整的HTML来剥离额外的样式和脚本。

如果你在这两个属性中的任意一个中赋值一些纯文本，这将覆盖应用到它的内部标记和样式(只有赋值的元素将保留其类型、属性和样式)，因此两个属性将包含相同的内容。然而，一些浏览器现在将不再支持写入innerText，只允许你覆盖textContent属性(当写入这些属性时，你不能插入HTML标记，因为HTML特殊字符将被正确编码，使用数字字符引用以字面形式出现，如果你在innerText或textContent赋值后读取innerHTML属性。

小开

在这里找到这个:

<!--[if lte IE 8]>
<script type="text/javascript">
if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
!Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
(function() {
var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
Object.defineProperty(Element.prototype, "textContent",
{ // It won't work if you just drop in innerText.get
// and innerText.set or the whole descriptor.
get : function() {
return innerText.get.call(this)
},
set : function(x) {
return innerText.set.call(this, x)
}
}
);
})();
</script>
<![endif]-->
小开

一个非常简单的Javascript行可以在所有主要浏览器中获得“非标记”文本……

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.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");
}
});
}
小开 
myElement.innerText = myElement.textContent = "foo";

编辑(感谢Mark Amery在下面的评论):只有当你毫无疑问地知道没有代码会依赖于检查这些属性的存在时，才这样做，就像(例如)jQuery那样。但如果你正在使用jQuery，你可能只需要使用"text"函数并执行$('#myElement').text('foo')，就像其他答案显示的那样。

小开

像这样的东西怎么样?

//$elem is the jQuery object passed along.


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

**我需要把我的大写。

小开

只是从原帖子下的评论中转发。innerHTML适用于所有浏览器。谢谢stefita。

myElement。innerHTML = "foo";

小开

innerText已经添加到Firefox中，应该在FF45版本中可用

已经编写了规范草案，并有望在未来被纳入HTML生活标准:http://rocallahan.github.io/innerText-spec/， https://github.com/whatwg/html/issues/465

请注意，目前Firefox、Chrome和IE实现都是不兼容的。展望未来，我们可能会看到Firefox、Chrome和Edge融合在一起，而旧的IE仍然不兼容。

参见:https://github.com/whatwg/compat/issues/5

小开

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

如果你想让它在以前版本的Firefox上工作，你可以使用textContent，它有对Firefox的支持更好，但对旧版本IE的支持更差: http://caniuse.com/#search=textContent


提交答案