2010-04-16 59 views
32

我听说使用el.innerText||el.textContent可以产生不可靠的结果每个文本节点,这就是为什么我一直在使用下面的函数在过去的坚持:的innerText /的textContent与检索

function getText(node) { 

    if (node.nodeType === 3) { 
     return node.data; 
    } 

    var txt = ''; 

    if (node = node.firstChild) do { 
     txt += getText(node); 
    } while (node = node.nextSibling); 

    return txt; 

} 

此功能遍历元素内的所有节点并收集所有文本节点的文本以及后代中的文本:

Eg

<div id="x">foo <em>foo...</em> foo</div> 

结果:

getText(document.getElementById('x')); // => "foo foo... foo" 

相当肯定还有用innerTexttextContent的问题,但我没能在别处找到一个明确的清单,我开始不知道这只是传闻

任何人都可以提供有关textContent/innerText可能缺乏可靠性的任何信息?

编辑:由Kangax发现这个伟大的答案 - 'innerText' works in IE, but not in Firefox

+0

太简单了,太有用了! 'document.TEXT_NODE'而不是'3'如何? 旧版浏览器不支持吗? – stackunderflow 2013-12-15 16:06:21

回答

33

这是所有关于endlines和空白 - 浏览器在这方面很不一致,特别是使在Internet Explorer中。遍历是一种在所有浏览器中获得相同结果的可靠方法。

+0

谢谢约翰。我很惊讶网络上的其他地方几乎没有提到这个问题......即使是QuirksMode也没有提到它。 – James 2010-04-16 15:29:16

+14

遍历不保证在所有浏览器中都有相同的结果。例如,在IE中(与其他浏览器不同),'