Введение

Document Object Model (DOM) — это структурное представление HTML-документа в виде дерева узлов. Браузер строит DOM для каждой веб-страницы. DOM объектно-ориентирован: каждый элемент — это объект с атрибутами и методами, к которым можно обратиться через JavaScript.

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

Как получить доступ к элементам DOM

В глобальном контексте доступ к корню DOM осуществляется через объект document. Например, у нас есть простая HTML-страница:

  
  


  

    
Welcome
    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
      Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
    
  
  

    
About
    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
      Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
    
  
  

    
Articles
    

      
Article Title One
      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      
       Read More 
    
    

      
Article Title Two
      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      
       Read More 
    
    

      
Article Title Three
      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      
       Read More 
    
    

      
Article Title Four
      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      
       Read More 
    
  

Если в консоли ввести document и нажать Enter, вы увидите интерактивный вывод дерева документа. Можно раскрывать узлы head и body и просматривать вложенные элементы.

У объекта document есть удобное свойство body, которое возвращает тег страницы. В консоли это можно вызвать так:

document.body

Результат отобразит узел body с его дочерними элементами:

Но доступ к свойствам объекта ограничен: document.body.section не найдёт нужный вам элемент. Для точного поиска используются методы-селекторы.

Что такое селекторы DOM

Селекторы DOM — это методы объекта document (и узлов), которые возвращают элементы страницы по разным критериям. Их можно разделить на две категории: одиночные и групповые селекторы.

Они работают по логике CSS-селекторов: тег, id, класс или сложная CSS-выборка.

Одиночные селекторы:

• getElementById()
• querySelector()

Групповые селекторы:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

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

Одиночные селекторы — когда и как использовать

Одиночные селекторы возвращают один элемент или null. Их удобно применять, когда вы уверены, что ищете единственный узел.

• getElementById(id) — ищет элемент по значению атрибута id. Возвращает элемент или null.
• querySelector(selector) — принимает любой CSS-селектор и возвращает первый соответствующий элемент.

Пример: добавьте файл main.js и подключите его перед закрывающим тегом :

Пример getElementById:

value = document.getElementById('article-3')
console.log(value)

Пример querySelector с классом (вернёт первый элемент с классом articles):

value = document.querySelector('.articles')
console.log(value)

Пример querySelector с id:

value = document.querySelector('#article-3')
console.log(value)

Совет: если элемент нужен часто, сохраните ссылку в переменной и переиспользуйте её. Повторный вызов селектора — лишняя работа браузеру.

Групповые селекторы — коллекции элементов

Групповые селекторы возвращают наборы элементов. Важно понимать их тип и поведение.

• getElementsByTagName(tagName) — возвращает HTMLCollection (живой список) всех элементов с указанным тегом.
• getElementsByClassName(className) — возвращает HTMLCollection всех элементов с данным классом.
• querySelectorAll(selector) — возвращает NodeList (статический список) всех совпадений по CSS-селектору.

Пример getElementsByTagName:

value = document.getElementsByTagName('h2')
console.log(value)

Пример getElementsByClassName:

value = document.getElementsByClassName('articles')
console.log(value)

Пример querySelectorAll:

value = document.querySelectorAll('#blog p')
console.log(value)

querySelectorAll позволяет комбинировать селекторы через запятую, как в CSS:

value = document.querySelectorAll('h2, .articles')
console.log(value)

Важное отличие: живые коллекции против статических

• HTMLCollection, возвращаемая getElementsByClassName и getElementsByTagName, живёт: при изменении DOM коллекция обновляется автоматически.
• NodeList, возвращаемая querySelectorAll, статична: она отражает DOM на момент вызова.

Это влияет на код. Например, если вы итерируете коллекцию и одновременно добавляете/удаляете элементы, поведение будет разным.

Пример проблемы с живой коллекцией:

const items = document.getElementsByClassName('articles');
for (let i = 0; i < items.length; i++) {
  items[i].remove(); // length уменьшается во время итерации
}

Если использовать querySelectorAll, можно безопасно итерировать полученный NodeList, потому что он не изменится во время цикла.

Полезные приёмы и шаблоны

Ниже — набор практических приёмов, которые экономят время и делают код надёжнее.

• Кэшируйте селекторы: const btn = document.querySelector(‘.btn’); — переиспользуйте btn.
• Преобразуйте NodeList/HTMLCollection в массив для удобной обработки: Array.from(nodeList) или […nodeList].
• Используйте event delegation (делегирование событий) для списка динамических элементов.
• Используйте querySelector внутри определённого контейнера: container.querySelectorAll(‘a’) — быстрее, чем поиск по всему документу.

Пример превращения в массив и итерации:

const nodes = document.querySelectorAll('.articles');
Array.from(nodes).forEach(node => {
  // безопасно работать с каждым элементом
});

Пример делегирования событий:

const blog = document.getElementById('blog');
blog.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (!link) return;
  // обработать клик по ссылке внутри #blog
});

Производительность и эвристики

• getElementById — самый быстрый для поиска по id, потому что браузеры оптимизированы под этот метод.
• querySelector/querySelectorAll гибкие, но могут быть медленнее для сложных селекторов.
• Ограничьте область поиска: container.querySelectorAll(‘…’) лучше, чем document.querySelectorAll(‘…’) для больших DOM.
• Не запускайте тяжёлые селекторы в цикле или внутри события scroll/resize без дебаунса.

Эти рекомендации основаны на общих особенностях движков браузеров. Всегда профилируйте производительность в конкретном приложении.

Когда селекторы подводят — контрпримеры

• Элемент генерируется динамически после вызова селектора. Решение: выполнять поиск после вставки в DOM или использовать делегирование событий.
• Используете getElementsByClassName, ожидая статический список — но DOM меняется и итерация ломается.
• Селектор возвращает null, и вы сразу вызываете метод: document.querySelector(‘#x’).classList.add(‘y’) — это выбросит ошибку. Всегда проверяйте на null.

Пример безопасной работы с возможным null:

const el = document.querySelector('#maybe');
if (el) {
  el.classList.add('active');
}

Альтернативы и инструменты

• jQuery: предоставляет единый API для поиска и манипуляций. В современных проектах часто заменяется нативными селекторами и современными API.
• Фреймворки (React, Vue, Angular) предпочитают управлять DOM виртуальной моделью; прямые селекторы используют редко, обычно через refs.
• Тестовые утилиты (Testing Library) предлагают семантические селекторы по роли/тексту для устойчивых тестов.

Выбор зависит от архитектуры приложения и стекa технологий.

Критерии приёмки (набор тестов)

• По id: document.getElementById возвращает элемент с нужным id и не null.
• По классу: querySelectorAll(‘.klass’) возвращает ожидаемое количество элементов.
• Делегирование: событие, привязанное к контейнеру, обрабатывает клики по динамически добавленным элементам.
• Безопасность: операции с возвращённым элементом не приводят к исключениям при отсутствии элемента.

Роль‑ориентированные чек‑листы

Для разработчика:

• Кэшировать часто используемые селекторы.
• Префиксовать селекторы контейнера при поиске в пределах компонента.
• Избегать селекторов по индексам (.list > li:nth-child(3)) для динамического контента.

Для тестировщика:

• Использовать семантические селекторы (data-testid, role) для стабильности тестов.
• Проверять сценарии с динамическим добавлением/удалением элементов.

Для дизайнера/верстальщика:

• Согласовать уникальные id и смысл классов, чтобы JS не ломался при правках верстки.

Быстрый шпаргалка (cheat sheet)

• document.getElementById(‘id’) — один элемент или null.
• document.querySelector(‘css’) — первый элемент или null.
• document.getElementsByClassName(‘class’) — HTMLCollection (живое).
• document.getElementsByTagName(‘tag’) — HTMLCollection (живое).
• document.querySelectorAll(‘css’) — NodeList (статическое).

Примеры итерации:

// NodeList поддерживает forEach
document.querySelectorAll('.articles').forEach(el => el.style.opacity = '0.9');

// HTMLCollection нужно преобразовать
const cols = document.getElementsByClassName('articles');
Array.from(cols).forEach(el => el.style.opacity = '0.9');

Безопасность и приватность

Селекторы сами по себе не повышают риск утечки данных. Но код, который собирает и отправляет содержимое элементов, может раскрывать пользовательские данные. Правила:

• Не отправляйте личные данные на сервер без явного согласия.
• Ограничьте доступ к элементам с конфиденциальной информацией.
• Проверяйте ввод из DOM перед отправкой на бэкенд.

Если вы работаете с формами, всегда валидируйте и санитизируйте данные на сервере.

Совместимость и миграция

• Все современные браузеры поддерживают перечисленные селекторы. Старые браузеры (IE9 и ниже) могут иметь ограничения с querySelectorAll; для критичных случаев проверьте целевую версию.
• При переходе на фреймворк уменьшите зависимость от глобальных селекторов. Используйте локальные refs и scoped-селекторы.

Примеры приема‑и‑отклика (snippet)

Динамическое добавление карточки и обработка клика через делегирование:

const list = document.getElementById('blog');

// Добавление новой карточки
function addArticle(id) {
  const div = document.createElement('div');
  div.className = 'articles';
  div.id = id;
  div.innerHTML = `
New ${id}
Read More`;
  list.appendChild(div);
}

// Делегирование кликов
list.addEventListener('click', (e) => {
  const card = e.target.closest('.articles');
  if (!card) return;
  console.log('Клик по карточке', card.id);
});

addArticle('article-5');

Ментальные модели и правила выбора

• Если нужен единственный элемент по id — используйте getElementById.
• Если нужен первый элемент по произвольному селектору — querySelector.
• Если нужен набор и требуется статичность — querySelectorAll.
• Если нужен набор и нужна «живость» (автообновление) — getElementsByClassName / getElementsByTagName.

Эти простые правила покрывают большинство случаев.

Диаграмма принятия решения

flowchart TD
  A[Нужен элемент?] --> B{По id?}
  B -- Да --> C[getElementById]
  B -- Нет --> D{Нужен первый матч?}
  D -- Да --> E[querySelector]
  D -- Нет --> F{Нужен NodeList статический?}
  F -- Да --> G[querySelectorAll]
  F -- Нет --> H[getElementsByClassName/getElementsByTagName]

1‑строчный словарь

• DOM — дерево узлов HTML-документа.
• Узел (node) — элемент, текст или комментарий в DOM.
• HTMLCollection — живой список элементов.
• NodeList — список узлов (может быть статическим).

Заключение

Селекторы DOM — базовый инструмент веб-разработчика. Зная разницу между getElementById, querySelector и групповыми методами, вы сможете писать быстрый и надёжный код. Ключевые правила: кэшируйте селекторы, ограничивайте область поиска, используйте делегирование для динамического содержимого и всегда проверяйте возврат на null.

Важно: тестируйте поведение в конечной среде и профилируйте узкие места в реальном приложении.

Краткое резюме:

• Выбирайте метод в зависимости от задачи.
• Помните о живых и статических коллекциях.
• Кэшируйте и ограничивайте область поиска для лучшей производительности.

Notes: если вы используете фреймворк, по возможности используйте встроенные способы доступа к элементам (refs) вместо глобальных селекторов.