如何在浏览器中 select 所有 *可渲染* 文本元素

Question

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

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

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

Answer 1

您应该可以在 JavaScript 的 1 行中完成此操作：

document.querySelector("body").innerText

Answer 2

这很棘手，但这是我想出的：

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

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