本文旨在提供一种使用JavaScript过滤网页上可见HTML节点的方法，以便提取网页中实际使用的字体文件。通过结合querySelectorAll、offsetWidth、offsetHeight以及window.getComputedStyle等API，我们可以有效地筛选出在页面上实际呈现的元素，并获取它们使用的字体信息，从而避免提取到未实际显示的字体。
在开发诸如提取网页字体文件的Chrome扩展程序时，一个常见的问题是如何排除那些虽然存在于DOM中，但实际上在页面上不可见的元素。例如，某些网站可能会将字体应用于隐藏的元素或仅在特定条件下显示的元素。为了解决这个问题，我们需要一种方法来过滤出网页上可见的HTML节点。
过滤可见节点
一种有效的方法是利用元素的 offsetWidth 和 offsetHeight 属性。如果一个元素的这两个属性都大于0，则可以认为该元素是可见的。我们可以使用 document.querySelectorAll 获取所有子元素，然后使用 filter 方法来筛选出可见的元素。
以下是示例代码：
立即学习“前端免费学习笔记（深入）”；
var childNodes = [].slice.call(document.body.querySelectorAll("*"));
var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0);这段代码首先使用 document.body.querySelectorAll("*") 获取 <body> 元素下的所有子元素。然后，使用 [].slice.call 将返回的 NodeList 转换为数组，以便可以使用数组的 filter 方法。filter 方法使用一个回调函数来判断每个元素是否可见，只有 offsetWidth 和 offsetHeight 都大于 0 的元素才会被保留。
注意： 这种方法比简单地检查 display: none 等CSS属性更为可靠，因为它可以考虑到元素因各种原因而不可见的情况，例如被其他元素遮挡或超出视口范围。
获取可见元素的字体
在获得可见节点列表后，我们可以使用 window.getComputedStyle 来获取每个元素的字体信息。
以下是示例代码：
立即学习“前端免费学习笔记（深入）”；
var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily).filter(ff => !!ff);
这段代码使用 map 方法将可见节点数组转换为字体家族数组。然后，使用 filter 方法过滤掉空字符串或 null 值，确保只保留有效的字体家族。
去重字体家族
为了获得唯一的字体家族列表，可以使用 Set 数据结构。
以下是示例代码：
立即学习“前端免费学习笔记（深入）”；
var uniqueFamilies = [...new Set(fontFamilies)];
这段代码使用 Set 数据结构来存储唯一的字体家族，然后使用展开运算符 ... 将 Set 转换为数组。
完整示例
以下是一个完整的示例，演示了如何过滤网页上可见的HTML节点并提取唯一的字体家族列表：
var childNodes = [].slice.call(document.body.querySelectorAll("*"));
var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0);
var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily).filter(ff => !!ff);
var uniqueFamilies = [...new Set(fontFamilies)];
console.log(uniqueFamilies);总结
通过结合 querySelectorAll、offsetWidth、offsetHeight 以及 window.getComputedStyle 等API，我们可以有效地过滤出网页上可见的元素，并获取它们使用的字体信息。这种方法可以帮助我们提取网页中实际使用的字体文件，避免提取到未实际显示的字体，从而提高效率和准确性。在实际应用中，可以根据具体需求进行调整和优化。例如，可以根据特定的CSS选择器来筛选元素，或者使用更复杂的算法来判断元素的可见性。
