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

Основные методы выбора элементов

Первый шаг в работе с DOM — получение ссылки на нужный элемент. JavaScript предлагает несколько методов для выбора элементов по различным критериям.

Выбор по ID

Метод getElementById возвращает элемент с указанным идентификатором:

const header = document.getElementById('main-header');
if (header) { header.style.color = 'blue';
}

Выбор по классу и тегу

Методы getElementsByClassName и getElementsByTagName возвращают коллекции элементов:

const buttons = document.getElementsByClassName('btn');
const paragraphs = document.getElementsByTagName('p');

Современные методы querySelector

Методы querySelector и querySelectorAll работают с CSS-селекторами:

const firstItem = document.querySelector('.list-item');
const allItems = document.querySelectorAll('.list-item');
Метод Возвращает Скорость
Один элемент Самая быстрая
Коллекция Быстрая
Один элемент Средняя
Медленнее

Изменение элементов и содержимого

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

Работа с текстом и HTML

Свойства textContent и innerHTML позволяют изменять содержимое элементов:

const div = document.querySelector('.content');
div.textContent = 'Новый текст'; // Безопасно
div.innerHTML = '<strong>Жирный текст</strong>'; // С HTML

Изменение атрибутов и стилей

Методы setAttribute/getAttribute и прямое изменение style:

const image = document.querySelector('img');
image.setAttribute('alt', 'Описание изображения');
image.style.border = '2px solid red';

Работа с классами

Свойство classList предоставляет методы для управления CSS-классами:

const element = document.getElementById('my-element');
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');

Создание и удаление элементов

JavaScript позволяет динамически создавать новые элементы и добавлять их в DOM.

Создание новых элементов

Метод createElement создает новый элемент, который затем можно добавить на страницу:

const newParagraph = document.createElement('p');
newParagraph.textContent = 'Новый параграф';
document.body.appendChild(newParagraph);

Удаление элементов

Для удаления элементов используется метод remove:

const oldElement = document.getElementById('old');
oldElement.remove();

Типичные ошибки и лучшие практики

При работе с DOM часто возникают специфические ошибки. Вот основные из них:

  • Попытка работать с элементами до их загрузки (решение: использовать событие DOMContentLoaded)
  • Использование innerHTML когда достаточно textContent (риск XSS-атак)
  • Забывание проверки на null при выборе элементов
  • Накопление обработчиков событий при динамическом создании элементов

Чек-лист безопасной работы с DOM

  • Всегда проверяйте, что элемент существует перед работой с ним
  • Используйте textContent вместо innerHTML для простого текста
  • Удаляйте обработчики событий при удалении элементов
  • Используйте делегирование событий для динамических элементов
  • Проверяйте производительность при массовых операциях с DOM

Частые вопросы

Что такое DOM в JavaScript?

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

Как выбрать элемент по ID в JavaScript?

Для выбора элемента по ID используется метод document.getElementById(‘id-элемента’). Он возвращает первый найденный элемент с указанным идентификатором или null, если элемент не найден.

Какие основные методы изменения содержимого элементов?

Основные методы: innerHTML для изменения HTML-содержимого, textContent для текстового содержимого, setAttribute для изменения атрибутов, classList для работы с CSS-классами.

Какие типичные ошибки при работе с DOM?

Частые ошибки: попытка работать с элементами до их загрузки, неправильное использование innerHTML вместо textContent, забывание проверки на null при выборе элементов, утечки памяти при удалении элементов.