По какому типу можно выбирать элементы

Выбор элементов в JavaScript

В JavaScript существует несколько основных типов селекторов, позволяющих выбирать элементы DOM по различным критериям. Рассмотрим основные категории:

1. Селекторы по тегу

Выбирают все элементы с указанным тегом.

// Выбрать все параграфы
const paragraphs = document.getElementsByTagName('p');

// Выбрать все div элементы
const divs = document.querySelectorAll('div');

2. Селекторы по классу

Выбирают элементы по имени класса (можно указывать несколько классов).

// Старый метод (возвращает HTMLCollection)
const elements = document.getElementsByClassName('my-class');

// Современный метод (возвращает NodeList)
const elements = document.querySelectorAll('.my-class');

// Элементы с несколькими классами
const multiClass = document.querySelectorAll('.class1.class2');

3. Селекторы по ID

Выбирают элемент по уникальному идентификатору (должен быть только один на странице).

// Прямой доступ по ID
const element = document.getElementById('my-id');

// Через querySelector (обязателен символ #)
const element = document.querySelector('#my-id');

4. Селекторы по атрибуту

Позволяют выбирать элементы на основе их атрибутов или значений атрибутов.

// Все элементы с атрибутом data-test
const elements = document.querySelectorAll('[data-test]');

// Элементы с конкретным значением атрибута
const links = document.querySelectorAll('a[target="_blank"]');

// Элементы, у которых атрибут начинается с определённого значения
const elements = document.querySelectorAll('[class^="prefix-"]');

5. Структурные селекторы

Выбирают элементы на основе их положения в DOM-дереве.

// Первый дочерний элемент
const firstChild = document.querySelector('ul > li:first-child');

// Последний дочерний элемент
const lastChild = document.querySelector('ul > li:last-child');

// n-ный элемент
const thirdItem = document.querySelector('ul > li:nth-child(3)');

// Чётные/нечётные элементы
const evenRows = document.querySelectorAll('tr:nth-child(even)');

6. Комбинаторы

Позволяют создавать сложные селекторы на основе отношений между элементами.

// Дочерний селектор (прямые потомки)
const directChildren = document.querySelectorAll('div > p');

// Соседний селектор (следующий элемент на том же уровне)
const adjacent = document.querySelectorAll('h1 + p');

// Общий селектор последующих элементов
const allFollowing = document.querySelectorAll('h1 ~ p');

7. Псевдоклассы и псевдоэлементы

Выбирают элементы на основе состояния или создают виртуальные элементы.

// Состояния элементов
const hoverable = document.querySelectorAll('a:hover');
const checkedInputs = document.querySelectorAll('input:checked');
const requiredFields = document.querySelectorAll('input:required');

// Псевдоэлементы (доступны только через CSS)
// В JavaScript можно получить только стили псевдоэлементов
const style = window.getComputedStyle(element, '::before');

8. Методы выбора элементов

В JavaScript доступны различные методы для работы с селекторами:

// querySelector - возвращает первый найденный элемент
const firstElement = document.querySelector('.my-class');

// querySelectorAll - возвращает NodeList всех элементов
const allElements = document.querySelectorAll('.my-class');

// Старые методы (возвращают живые коллекции)
const byTag = document.getElementsByTagName('div');     // HTMLCollection
const byClass = document.getElementsByClassName('item'); // HTMLCollection
const byId = document.getElementById('header');         // Element или null

Ключевые отличия методов:

• querySelectorAll возвращает статическую NodeList
• getElementsBy* методы возвращают "живые" HTMLCollection
• getElementById работает быстрее, но выбирает только по ID
• querySelector поддерживает все CSS-селекторы
• Для сложных выборов лучше использовать querySelectorAll с CSS3-селекторами

Пример комплексного селектора:

// Выбрать все чётные строки таблицы с классом 'data-table',
// которые имеют data-status="active"
const activeEvenRows = document.querySelectorAll(
  'table.data-table > tbody > tr:nth-child(even)[data-status="active"]'
);

Выбор типа селектора зависит от конкретной задачи: для единичных элементов лучше использовать ID, для групп элементов по стилю - классы, для сложных условий - комбинации атрибутов и структурные селекторы. Важно учитывать производительность - ID-селекторы самые быстрые, сложные селекторы с псевдоклассами могут быть медленнее.