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

Question

>我正在尝试创建一个Chrome扩展程序，该扩展程序将搜索网页中的任何元素。

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

这为我提供了带有标签输入的所有元素。

但

有时该元素在屏幕上不可见，但存在于源代码中，因为如果我想过滤，我尝试使用 偏移宽度 ， 左， 右 ， 高度 属性

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)