Как получить все элементы на странице?

Как получить все элементы на странице?

• DOM представляет HTML-документ в виде дерева элементов
• Для этого применяют document.querySelectorAll('*') — селектор, соответствующий всем элементам
• Метод возвращает NodeList, содержащий все элементы документа
• Полученную коллекцию можно перебрать, чтобы обработать или отфильтровать нужные узлы
• Также доступен document.getElementsByTagName('*') — устаревший API, возвращающий HTMLCollection
• Такой подход используют для анализа страницы, её полной модификации и сбора статистики
• Перебор выполняется быстро и требует минимум ресурсов браузера

Подробный ответ

Основной ответ

Для поиска всех элементов на странице в браузере обычно обращаются к DOM API, с помощью которого можно выбирать узлы документа и перебирать их. Наиболее простой вариант — метод document.querySelectorAll('*'): он возвращает список всех элементов текущей страницы, независимо от их тегов. Другой вариант — document.getElementsByTagName('*'). Однако querySelectorAll формирует статический NodeList, а getElementsByTagName — живую коллекцию, которая отражает изменения DOM.

Ключевые моменты

• querySelectorAll('*') выбирает все элементы независимо от их типа, используя CSS-селектор *. Метод поддерживает сложные селекторы и совместим с современными браузерами, включая React 18+ и Chrome 110+.
• getElementsByTagName('*') относится к более старым методам и возвращает живую коллекцию. При изменениях DOM это может сказываться на производительности.
• На больших страницах важно оценивать эффективность и расход памяти: получение полного списка элементов способно оказаться затратной операцией.

Практический контекст

На практике такой приём применяют для обхода DOM — например, в скриптах автоматизации, парсинге и end-to-end-тестах. В Puppeteer и Cypress можно выбрать все элементы, а затем отфильтровать их по атрибутам или классам. В продакшене частых обращений ко всем элементам лучше избегать, поскольку они создают дополнительную нагрузку на производительность.