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

В этой статье вы научитесь пользоваться функциями-селекторами DOM, чтобы получать элементы страницы и безопасно с ними работать.

Что такое документ и как начать

В JavaScript у каждой страницы есть глобальный объект document. Он представляет HTML-документ и предоставляет методы и свойства для работы с элементами.

Например, рассмотрим простую 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, чтобы исследовать структуру. Например, раскрытие head и body даст следующий вид:

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

document.body  

Но дальше доступ через простые свойства (например document.body.section) не работает универсально — для доступа к произвольным элементам используют методы-селекторы.

Что такое селекторы DOM и какие они бывают

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

• одиночные селекторы (возвращают первый найденный элемент или конкретный элемент),
• множественные селекторы (возвращают коллекции/списки элементов).

Обычно они принимают селектор в виде тега, id, класса или произвольной строки CSS-селектора.

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

• getElementById()
• querySelector()

Множественные селекторы:

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

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

Одиночные селекторы — примеры и рекомендации

Подключите JavaScript-файл к HTML, поместив тег перед закрывающимся :

getElementById(id) возвращает элемент по его id:

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

querySelector(selector) принимает любой CSS-селектор, но возвращает только первый совпавший узел:

Пример с классом:

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

Вернёт первый div с классом articles.

Пример с id:

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

Рекомендации по одиночным селекторам:

• Для поиска по id обычно быстрее и читабельнее getElementById.
• Для гибкости и использования CSS-синтаксиса используйте querySelector.
• Оба возвращают null, если элемент не найден — учитывайте это в коде.

Множественные селекторы — коллекции и их поведение

getElementsByTagName(tagName) возвращает HTMLCollection всех элементов с указанным тегом:

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

getElementsByClassName(className) возвращает HTMLCollection по имени класса:

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

querySelectorAll(selector) возвращает статический NodeList всех элементов, соответствующих селектору:

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

Можно объединять селекторы, как в CSS:

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

Важные различия:

• HTMLCollection (getElementsByTagName, getElementsByClassName) — «живая» коллекция: она отражает текущие изменения DOM автоматически.
• NodeList от querySelectorAll — статический список: создаётся в момент вызова и не обновляется при изменениях DOM.

Практическая подсказка: если нужно итеративно обрабатывать результаты или использовать все методы массива, преобразуйте NodeList/HTMLCollection в массив:

const nodes = Array.from(document.querySelectorAll('.articles'))
nodes.forEach(node => { /* ... */ })

Или для старых окружений:

const nodes = [].slice.call(document.getElementsByClassName('articles'))

Частые операции с выбранными элементами

После получения узла вы можете читать и менять атрибуты и содержимое:

• textContent — текст без HTML-разметки,
• innerText — текст, учитывающий визуальное отображение,
• innerHTML — HTML-содержимое узла,
• classList — удобный интерфейс для работы с классами (add, remove, toggle, contains),
• dataset — доступ к data-* атрибутам,
• setAttribute/getAttribute — для произвольных атрибутов,
• closest(selector) — поиск ближайшего родителя по селектору,
• matches(selector) — проверка соответствия узла селектору.

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

const el = document.getElementById('article-3')
el.querySelector('h3').textContent = 'Новый заголовок'
el.classList.add('highlight')

Когда селекторы подводят (примеры и ошибки)

• Использование querySelector для ожидания нескольких элементов — вернёт только первый.
• Надёжность по id: если в документе повторяются id (нарушение спецификации), поведение непредсказуемо.
• Селекторы, завязанные на структуру (например, div > p:first-child), ломаются при изменении верстки.
• Не учитывают асинхронную загрузку: если элементы добавляются после выполнения скрипта, вызов селектора должен происходить после вставки или при событии DOMContentLoaded.

Пример ошибки времени выполнения:

// Если скрипт выполнится до появления #article-3
const el = document.getElementById('article-3')
// el будет null — попытка доступа к свойствам выбросит ошибку

Как избежать: помещайте