Как сделать выбор элементов из DOM на JavaScript?

В этой статье проведём обзор способов выбора элементов на чистом JavaScript.

Базовые методы querySelector:

// Выбор первого совпадения
const element1 = document.querySelector('.class');      // по классу
const element2 = document.querySelector('#id');         // по ID
const element3 = document.querySelector('div');         // по тегу
const element4 = document.querySelector('[data-attr]'); // по атрибуту

// Выбор ВСЕХ совпадений
const elements1 = document.querySelectorAll('.class');

Классические методы DOM:

// По ID
const elementById = document.getElementById('myId');

// По имени класса
const elementsByClass = document.getElementsByClassName('myClass');

// По тегу
const elementsByTag = document.getElementsByTagName('div');

Вложенные селекторы:

// Nested селекторы
const nestedElement = document.querySelector('.parent .child');

// Прямой потомок
const directChild = document.querySelector('.parent > .child');

// Nth элемент
const nthElement = document.querySelector('.list li:nth-child(2)');

Методы с деструктуризацией:

// Первый и последний элемент
const [firstElement] = document.querySelectorAll('.items');
const [lastElement] = [...document.querySelectorAll('.items')].reverse();

Поиск ближайших элементов:

// Родительский элемент
const parentElement = currentElement.parentElement;

// Дочерние элементы
const childElements = currentElement.children;

// Соседние элементы
const nextSibling = currentElement.nextElementSibling;
const prevSibling = currentElement.previousElementSibling;

Безопасный выбор с проверкой:

Пример реализации через функцию:

function safeSelect(selector) {
    const element = document.querySelector(selector);
    
    if (!element) {
        console.warn(`Элемент с селектором ${selector} не найден`);
        return null;
    }
    
    return element;
}

💡 Рекомендации:

• querySelector медленнее, чем getElementById
• Используйте const для неизменяемых селекторов
• Кэшируйте часто используемые элементы
• Проверяйте существование элемента перед работой
• Для производительности используйте делегирование событий
• Учтите, что querySelectorAll() возвращает NodeList
• Всегда проверяйте поддержку браузеров

🔍 Производительность (от быстрого к медленному):

1. getElementById() — Самый быстрый
2. getElementsByClassName()
3. getElementsByTagName()
4. querySelector()
5. querySelectorAll()