Question

如何在浏览器文档中选择所有可见的可渲染HTML文本节点？

换句话说，如何通过脚本获取DOM节点列表，以便按文档顺序获取浏览器中用户实际可见的文本？

我想依靠浏览器告诉我构成当前可见的可渲染文本的节点。我不知道从哪里开始。帮助

Answer 1

这很棘手，但这就是我提出的：

function traverse(o) {
  var a = [];
  [].forEach.call(o.childNodes, function(val) {
    if(val.nodeType===3) {
      if(val.nodeValue.trim()>'') a.push(val);
    }
    else {
      var style= getComputedStyle(val);
      if(val.tagName!=='NOSCRIPT' && 
         style.getPropertyValue('display')!=='none' &&
         style.getPropertyValue('visibility')!=='hidden' &&
         style.getPropertyValue('opacity')!=='0' &&
         style.getPropertyValue('color')!==style.getPropertyValue('background-color')
        ) {
        a= a.concat(traverse(val));
      }
    }
  });
  return a;
} //traverse

var textNodes= traverse(document.body);

Working Fiddle

不检查文本节点是否隐藏在其他元素后面，或者它们是否绝对位于屏幕外。

Answer 2

您应该可以在一行JavaScript中执行此操作：

document.querySelector("body").innerText

如何在浏览器中选择所有* renderable *文本元素

2 个答案: