javascript - 如何使用 document.getElementsByTag 和 document.queryselectAll 仅获取可见元素

Question

我正在尝试创建一个 chrome 扩展，它将搜索网页中的任何元素。

目前我正在使用 var elm = document.getElementsByTagName("input");

这给了我所有带有标签输入的元素。

但有时该元素在屏幕上不可见，但出现在源代码中，为此，如果我想过滤，我尝试使用 offsetwidth 、 left、 right 、 height 属性

elm.offsetWidth 但它总是给出 0 所以我无法过滤掉。

这些元素也没有我可以使用的任何可见性属性。

有没有其他方法可以使用 Javascript 来做到这一点？

Answer 1

诀窍是过滤element.offsetWidth !== 0 || element.offsetHeight !== 0以确定元素是否可见。

所以，在你的例子中，使用这个：

var elm = [...document.querySelectorAll('input')]
   .filter(x => x.offsetWidth !== 0 || x.offsetHeight !== 0)