Доступ к элементам HTML-документа: обзор методов и примеры

Расширенные примеры получения DOM-элементов

Пример 1. Использование псевдоклассов в querySelector

Псевдоклассы позволяют выбирать элементы по их состоянию. Например, :not, :nth-child, :first-of-type.

// Получить первый элемент среди всех, не имеющих класс "hidden"
const firstVisible = document.querySelector(':not(.hidden)');
// Получить второй <li> в списке
const secondItem = document.querySelector('ul li:nth-child(2)');
// Получить последний <p> внутри <div>
const lastParagraph = document.querySelector('div p:last-of-type');

// Результат: первый элемент, не скрытый, второй пункт списка, последний параграф (если существуют)

Пример 2. Поиск внутри конкретного элемента

Методы querySelector и querySelectorAll можно вызывать не только на document, но и на любом элементе. Это ограничивает область поиска.

const container = document.getElementById('container');
const innerSpan = container.querySelector('span'); // только внутри контейнера
const allButtons = container.querySelectorAll('.btn'); // все кнопки внутри контейнера

// Если в контейнере нет span - null; если есть кнопки - NodeList

Пример 3. Атрибутные селекторы

Можно искать элементы по значениям атрибутов: [data-*], [href^="https"], [type="submit"].

// Все элементы с data-атрибутом
const dataElements = document.querySelectorAll('[data-*]');
// Ссылки, начинающиеся с https
const secureLinks = document.querySelectorAll('a[href^="https"]');
// Кнопки типа submit
const submitButtons = document.querySelectorAll('input[type="submit"]');

// Возвращаются NodeList соответствующих элементов

Пример 4. Несколько классов и комбинации

Можно комбинировать классы, идентификаторы и теги: .class1.class2, div#id, ul > li.active

// Элемент с двумя классами
const doubleClass = document.querySelector('.item.active');
// Прямой потомок
const directChild = document.querySelector('ul > li');
// Соседний элемент
const adjacent = document.querySelector('h2 + p'); // параграф сразу после h2

// В результате - первый подходящий элемент или null

Пример 5. Работа с живыми коллекциями и преобразование в массив

Живые коллекции (HTMLCollection) не имеют методов массива. Чтобы использовать map, filter и reduce, их преобразуют в массив.

const divs = document.getElementsByTagName('div');
const divArray = Array.from(divs);
// или const divArray = [...divs];
const texts = divArray.map(div => div.textContent);

// texts - массив текстового содержимого всех div

Пример 6. Получение элементов в Shadow DOM

Если веб-компонент использует Shadow DOM, элементы внутри shadowRoot не видны из document.querySelector. Доступ к ним осуществляется через свойство shadowRoot.

const host = document.querySelector('my-component');
const shadow = host.shadowRoot;
const shadowButton = shadow.querySelector('.inner-button');

// shadowButton - элемент внутри Shadow DOM

Пример 7. Фильтрация с помощью matches()

Метод element.matches(selector) проверяет, соответствует ли элемент CSS-селектору. Его можно использовать для фильтрации коллекции.

const allItems = document.querySelectorAll('li');
// Оставить только те, у которых есть класс "active"
const activeItems = Array.from(allItems).filter(item => item.matches('.active'));

// activeItems - массив элементов с классом active

Пример 8. Комбинированный поиск с использованием closest

В обработчиках событий часто требуется найти ближайшего родителя с определённым классом.

document.addEventListener('click', function(e) {
  const row = e.target.closest('.data-row');
  if (row) {
    console.log('Кликнут ряд:', row);
  }
});

// Если клик произошёл внутри .data-row, будет выведен этот элемент; иначе ничего.