如何过滤网页上可见的HTML节点-html教程-PHP中文网

如何过滤网页上可见的HTML节点

霞舞

发布： 2025-08-14 17:42:02

原创

700人浏览过

如何过滤网页上可见的html节点

本文旨在提供一种高效的方法，通过 JavaScript 过滤出网页上实际可见的 HTML 节点，并提取这些节点所使用的字体。通过使用 offsetWidth 和 offsetHeight 属性进行可见性判断，并结合 window.getComputedStyle 获取字体信息，可以准确地识别网页上实际渲染的字体资源，避免提取到未显示的元素的字体，从而优化字体资源提取的效率和准确性。

在网页开发中，有时我们需要提取网页上实际显示的元素的信息，例如字体。直接遍历所有元素可能会包含隐藏的元素，导致提取的信息不准确。本教程将介绍如何使用 JavaScript 过滤出网页上可见的 HTML 节点，并获取它们使用的字体。

过滤可见节点

核心思路是利用元素的 offsetWidth 和 offsetHeight 属性来判断其是否可见。如果一个元素的这两个属性都大于 0，则可以认为该元素是可见的。这种方法比简单地检查 display: none 等 CSS 属性更为可靠，因为它考虑了元素是否被裁剪、透明度等因素。

以下代码展示了如何获取网页上所有可见的 HTML 节点：

立即学习“前端免费学习笔记（深入）”；

var childNodes = [].slice.call(document.body.querySelectorAll("*"));
var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0);

console.log(visibleNodes); // 输出所有可见节点

登录后复制

这段代码首先使用 querySelectorAll("*") 获取 <body> 元素下的所有子元素。然后，使用 [].slice.call() 将 NodeList 转换为数组，以便使用 filter 方法。最后，filter 方法根据 offsetWidth 和 offsetHeight 属性过滤出可见节点。

获取可见节点的字体

获取可见节点的字体可以使用 window.getComputedStyle 方法。该方法可以获取元素最终应用的样式。

以下代码展示了如何获取所有可见节点的字体，并去除空值或 null 值：

Logome

AI驱动的Logo生成工具

133

查看详情

var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily).filter(ff => !!ff);

console.log(fontFamilies); // 输出所有可见节点的字体

登录后复制

这段代码首先使用 map 方法遍历 visibleNodes 数组，并使用 window.getComputedStyle(node).fontFamily 获取每个节点的字体。然后，使用 filter 方法过滤掉空值或 null 值。

去重字体列表

有时，我们需要获取唯一的字体列表。可以使用 Set 数据结构来去重。

以下代码展示了如何获取唯一的字体列表：

var uniqueFamilies = [...new Set(fontFamilies)];

console.log(uniqueFamilies); // 输出唯一的字体列表

登录后复制

这段代码使用 Set 数据结构来存储字体，因为 Set 中不允许有重复的元素。然后，使用扩展运算符 ... 将 Set 转换为数组。

完整示例

以下是一个完整的示例，展示了如何获取网页上所有可见节点的唯一字体列表：

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); // 输出唯一的字体列表

登录后复制

注意事项

offsetWidth 和 offsetHeight 属性可能会受到 CSS 样式的影响，例如 transform 属性。
window.getComputedStyle 方法的性能可能受到影响，特别是当需要处理大量节点时。
此方法只能获取到元素最终应用的字体，无法获取到字体文件的 URL。

总结

本文介绍了如何使用 JavaScript 过滤出网页上可见的 HTML 节点，并获取它们使用的字体。通过使用 offsetWidth 和 offsetHeight 属性进行可见性判断，并结合 window.getComputedStyle 获取字体信息，可以准确地识别网页上实际渲染的字体资源。该方法可以应用于各种场景，例如字体资源提取、网页性能优化等。

以上就是如何过滤网页上可见的HTML节点的详细内容，更多请关注php中文网其它相关文章！