Как выбрать элементы DOM?

Выбор элементов DOM в JavaScript — это фундаментальный навык, с которого начинается любое взаимодействие скрипта со страницей. Современный стандарт предлагает несколько мощных и гибких методов для поиска нужных узлов, каждый из которых имеет свои особенности применения и производительность.

Самым быстрым способом найти уникальный элемент на странице является метод getElementById. Он принимает в качестве аргумента строку с уникальным идентификатором элемента (атрибутом id) и возвращает объект этого элемента или null, если ничего не найдено. Поскольку ID должен быть уникальным в пределах документа, этот метод работает очень эффективно.

Для более сложных и универсальных задач используются методы querySelector и querySelectorAll. Первый из них, querySelector, принимает любой валидный CSS-селектор и возвращает первый попавшийся элемент, который удовлетворяет этому условию. Например, можно искать по классу, тегу, атрибуту или их комбинации. Если вам нужно получить все элементы, соответствующие условию, используется querySelectorAll. Этот метод возвращает статичный список элементов в формате NodeList, по которому можно итеративно пройтись, например, с помощью цикла forEach.

Исторические методы поиска, такие как getElementsByClassName и getElementsByTagName, возвращают живую коллекцию HTMLCollection. Они ищут элементы по конкретному классу или тегу соответственно. Особенность "живых" коллекций заключается в том, что они автоматически обновляются в реальном времени при изменении структуры DOM, что бывает удобно в определенных сценариях, но требует осторожности при манипуляциях с элементами внутри циклов.

На практике выбор метода зависит от вашей задачи. Для точечного поиска уникальных элементов лучше всего подходят getElementById или querySelector. Когда требуется стилизация или пакетная обработка группы элементов по сложным правилам верстки, незаменимыми окажутся querySelectorAll и селекторы CSS.