Як вибрати елементи DOM?

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

Найшвидшим способом знайти унікальний елемент на сторінці є метод getElementById. Він приймає як аргумент рядок із унікальним ідентифікатором елемента (атрибутом id) та повертає об'єкт цього елемента або null, якщо нічого не знайдено. Оскільки ID має бути унікальним у межах документа, цей метод працює дуже ефективно.

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

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

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