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

Question

如何从节点获取文本，使其以“innerText”之类的空格格式返回，但不包括隐藏的后代节点（样式显示：无）？

Answer 1

更新：正如OP在下面的评论中指出的那样，即使MDN clearly states that IE introduced innerText to exclude hidden content，在IE中进行测试表明情况并非如此。总结一下：

• Chrome：innerText仅返回来自可见元素的文字。
• IE：innerText返回所有文本，无论元素的可见性如何。
• Firefox：innerText未定义（as indicated by the 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对象上创建一个属性，这样会感觉更“自然”。起初我认为这将是一种巧妙的方式来填充Firefox上的innerText属性，但该属性不是作为Node对象原型上的属性创建的，所以你真的会在那里玩火。但是，您可以创建一个新属性，例如textContentVisible：

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

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

Answer 2

这很有趣，我来这里是因为我在寻找为什么 display:none 元素的文本在 Chrome 中被省略了。

所以，这最终是我的解决方案。
基本上，我克隆节点并删除设置 display:none 的类/样式。

如何添加隐藏元素的innerText

function getInnerText(selector) {
    let d = document.createElement('div')
    d.innerHTML = document.querySelector(selector).innerHTML.replaceAll(' class="hidden"', '')
    return d.innerText
}