如何使用 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)

How to get only Visible Elements using document.getElementsByTag and document.queryselectAll