Как получить только видимые элементы, используя 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)