Chrome Headless：获取仅可见节点的 DOM答案

【问题标题】：Chrome Headless: Get DOM of only visible nodesChrome Headless：获取仅可见节点的 DOM
【发布时间】：2017-07-08 01:29:18
【问题描述】：

我一直在寻找一种让 Chrome Headless 只输出可见的方法 DOM 节点作为树。

我正在使用下面的代码来输出整个 DOM，但这包括不可见的元素。

Runtime.evaluate({expression: 'document.documentElement.outerHTML'})

有没有办法修剪所有不可见的节点？

【问题讨论】：

【解决方案1】：

我不确定将其作为一棵树来做。为此，我认为您必须获取所有节点，然后自行遍历树并删除不可见的节点。

这将返回一个节点列表。

Runtime.evaluate({expression: 'document.querySelectorAll("*:visible")'})

【讨论】：

有趣。你认为我可以使用 "*:hidden" 选择所有隐藏的元素并删除它们吗？
好吧，你实际上会搜索document.querySelectorAll("*:not(:visible)")，然后你可以删除它们。
完美。我现在就试一试。
在 Chrome 的控制台中输入 document.querySelectorAll("*:visible"); 会给我一个 '*:visible' is not a valid selector. 错误。有什么问题？
@Brad 对不起。我的错。您可以这样做，但您需要 JQuery for :visible 才能工作。