'innerText'适用于IE,但不适用于Firefox

Question

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

myElement.innerText = "foo";

但是,似乎'innerText'属性在Firefox中不起作用.是否有一些Firefox等价？或者是否可以使用更通用的跨浏览器属性？

Answer 1

更新:我写了一篇博文,详细介绍了所有的差异.

Firefox使用的是W3C标准Node::textContent,但它的行为与MSHTML专有的略有不同innerText(由Opera复制,不久之前,还有许多其他MSHTML功能).

首先,textContent空白表示不同于innerText一个.其次,更重要的是,textContent 包括所有SCRIPT标记内容,而innerText则不包括.

只是为了让事情变得更有趣,歌剧院-除了执行标准textContent-决定也添加MSHTML的innerText ,但改变了它作为textContent -即包括脚本内容(事实上,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也有错误的innerText实现.在Safari中,innerText仅当元素既不是隐藏(通过style.display == "none")也不是孤立于文档中时,它才能正常运行.否则,会innerText产生一个空字符串.

我正在玩textContent抽象(解决这些缺陷),但事实证明它相当复杂.

您最好的选择是首先确定您的确切要求并从那里开始.通常可以简单地从innerHTML元素中剥离标记,而不是处理所有可能的textContent/ innerText偏差.

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

Answer 2

Firefox使用符合W3C标准的 textContent属性.

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

Answer 3

如果您只需要设置文本内容而不需要检索,这里有一个可以在任何浏览器上使用的简单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));
}

Answer 4

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

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

Answer 5

根据Prakash K的回答,Firefox不支持innerText属性.因此,您可以简单地测试用户代理是否支持此属性,并按如下所示进行相应操作:

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

Answer 6

一个非常简单的Javascript系列可以在所有主浏览器中获得"非标记"文本...

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

Answer 7

请注意,该Element::innerText属性不会包含display:noneGoogle Chrome中CSS样式" " 隐藏的文本(同时它将删除已被其他CSS技术屏蔽的内容(包括font-size:0,color:transparent和一些其他类似的效果,导致文本不以任何可见的方式呈现).

其他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,无关紧要)也会导致插入换行符.
• 某些浏览器还会在跨距之间包含单个空格分隔

但是Element::textContent,即使它们是不可见的,它仍将包含所有内部文本元素的内容,与所应用的CSS无关.并且textContent中不会生成额外的换行符或空格,它只会忽略所有样式和内部元素的内联/块或定位类型.

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

然后,Google Chrome支持这两种属性,但其内容可能会有所不同.旧的浏览器仍然包含在innetText中,就像textContent现在包含的一样(但是它们与当时生成的空格/换行相关的行为是不一致的).

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

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

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

现在,使用HTML/CSS解析器和DOM属性,主要搜索引擎(也将解析HTML页面的CSS,并且还将忽略背景上没有对比颜色的文本)忽略CSS技巧隐藏的文本"innerText"与现代视觉浏览器完全一样(至少这个不可见的内容不会被索引,所以隐藏文本不能用作强制在页面中包含一些关键字来检查其内容的技巧); 但是这个隐藏文本将在结果页面中显示(如果页面仍然从索引中限定为包含在结果中),则使用"textContent"属性而不是完整的HTML来删除额外的样式和脚本.

如果在这两个属性中的任何一个中分配一些纯文本,这将覆盖应用于它的内部标记和样式(只有指定的元素将保留其类型,属性和样式),因此这两个属性将包含相同的内容.但是,某些浏览器现在不再支持对innerText的写入,并且只允许您覆盖textContent属性(在写入这些属性时不能插入HTML标记,因为HTML特殊字符将使用数字字符引用正确编码,从字面上看,如果您innerHTML在分配innerText或之后阅读该财产textContent.

Answer 8

myElement.innerText = myElement.textContent = "foo";

编辑(感谢Mark Amery对下面的评论):只有这样做才能做到这一点,如果你知道没有代码会依赖于检查这些属性的存在,比如(例如)jQuery.但是如果你正在使用jQuery,你可能只需要使用"text"函数并执行$('#myElement').text('foo'),如其他一些答案所示.

Answer 9

innerText已添加到 Firefox 中，应该在 FF45 版本中可用：https ://bugzilla.mozilla.org/show_bug.cgi ? id = 264412

一个规范的草案已经编写并有望被纳入在今后的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