获取元素的内部文本,但排除隐藏的子元素
Get the innerText of an element, but exclude hidden children
如何从节点获取文本,以便它像"innerText"那样以空格格式返回它,但排除隐藏的后代节点(样式显示:none)?
更新:正如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
对象上创建一个属性,这样感觉更"自然"。 起初,我认为这是在 Firefox 上填充 innerText
属性的聪明方法,但该属性不是作为Node
对象原型上的属性创建的,所以你真的会在那里玩火。 但是,您可以创建一个新属性,例如textContentVisible
:
Object.defineProperty( Node.prototype, 'textContentVisible', {
get: function() {
return getVisibleText( this );
},
enumerable: true
});
下面是一个演示这些技术的 JsFiddle: http://jsfiddle.net/8S82d/
这很有趣,我来这里是因为我正在寻找为什么在 Chrome 中省略了display:none
元素的文本。
所以,这最终是我的解决方案.
基本上,我克隆节点并删除设置display:none
的类/样式。
如何添加隐藏元素的innerText
function getInnerText(selector) {
let d = document.createElement('div')
d.innerHTML = document.querySelector(selector).innerHTML.replaceAll(' class="hidden"', '')
return d.innerText
}
相关文章:
- 使用 jQuery 创建可单击的行并排除子元素
- getElementsByTagName排除元素(筛选器)
- 如何将元素添加到动态数组并排除现有元素
- jQuery按数据值排除元素
- 排除基于先前ElementSibling的元素
- 获取元素的内部文本,但排除隐藏的子元素
- 我可以在 ReactJS 中排除原始元素的子元素吗?
- 如何在绑定事件期间排除元素
- 如何在文档单击时排除元素
- 从 hide() 操作中排除父元素及其子元素
- TinyMCE - 排除元素
- 从预加载中排除元素
- 如何在身体鼠标移动时排除某些元素
- 从某个元素中排除按键
- 如何在jquery.click()事件中排除元素类作为目标
- 从dom获取整个html,但排除一些元素
- 无序播放12<李>来自<ul>从列表中排除3个元素
- 如何从ng单击操作中排除元素
- 在javascript中从onbeforeprint中排除特定元素
- 不能排除用于排序的元素