获取元素的innerText，但排除隐藏的子元素

Question

如何从节点获取文本，以便它以像“innerText”那样的空白格式返回它，但排除隐藏的后代节点（样式显示：无）？

Answer 1

更新：正如 OP 在下面的评论中指出的那样，尽管MDN 明确指出 IE 是innerText为了排除隐藏内容而引入的，但在 IE 中的测试表明情况并非如此。总结一下：

• Chrome：innerText仅从可见元素返回文本。
• IE：innerText返回所有文本，不管元素的可见性。
• Firefox：innerText未定义（如 W3C 所示，并在我的测试中）。

把所有这些加起来，你就有了一个像瘟疫一样避免的属性。继续阅读以获取解决方案......

如果您想要跨浏览器兼容性，则必须推出自己的功能。这是一个效果很好的：

function getVisibleText( node ) {
    if( node.nodeType === Node.TEXT_NODE ) return node.textContent;
    var style = getComputedStyle( node );
    if( style && style.display === 'none' ) return '';
    var text = '';
    for( var i=0; i<node.childNodes.length; i++ ) 
        text += getVisibleText( node.childNodes[i] );
    return text;
}

如果你想变得非常聪明，你可以在Node对象上创建一个属性，这样感觉更“自然”。起初我认为这是一种innerText在 Firefox上 polyfill属性的聪明方法，但该属性不是作为Node对象原型上的属性创建的，所以你真的会在那里玩火。但是，您可以创建一个新属性，例如textContentVisible：

Object.defineProperty( Node.prototype, 'textContentVisible', {
    get: function() { 
       return getVisibleText( this );
    }, 
    enumerable: true
});

这是演示这些技术的 JsFiddle：http : //jsfiddle.net/8S82d/