PrepBro
← Назад к вопросам

Зачем нужен DOM?

1.2 Junior🔥 151 комментариев
#Браузер и сетевые технологии

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Зачем нужен DOM?

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

Основная роль DOM

ДОМ — это мост между JavaScript-кодом и визуальным отображением страницы. Без DOM мы не могли бы:

  • Читать и изменять содержимое страницы
  • Реагировать на действия пользователя
  • Динамически создавать новые элементы
  • Управлять стилями

Структура DOM

ДОМ представляет HTML-документ в виде дерева узлов:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример</title>
  </head>
  <body>
    <div id="app">
      <h1>Заголовок</h1>
      <p>Текст</p>
    </div>
  </body>
</html>

Соответствует дереву в памяти:

document
  html
    head
      title "Пример"
    body
      div#app
        h1 "Заголовок"
        p "Текст"

Основные типы узлов DOM

  1. Document — корневой объект всего документа
  2. Element nodes — теги HTML (div, p, span и т.д.)
  3. Text nodes — текстовое содержимое
  4. Attribute nodes — атрибуты элементов
  5. Comment nodes — комментарии в HTML

Для чего нужен DOM на практике

1. Чтение и изменение содержимого

// Чтение
const title = document.getElementById('title');
console.log(title.textContent); // "Мой заголовок"

// Изменение
title.textContent = 'Новый заголовок';
title.innerHTML = '<strong>Жирный</strong> текст';

// Чтение атрибутов
const href = document.querySelector('a').getAttribute('href');

// Изменение атрибутов
document.querySelector('img').setAttribute('src', '/new-image.jpg');

2. Обработка событий пользователя

// Клик
const button = document.getElementById('my-button');
button.addEventListener('click', () => {
  console.log('Кнопка нажата!');
});

// Ввод в форму
const input = document.querySelector('input');
input.addEventListener('input', (event) => {
  console.log('Введено:', event.target.value);
});

// Отправка формы
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Форма отправлена');
});

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

// Создание элемента
const newDiv = document.createElement('div');
newDiv.textContent = 'Новый элемент';
newDiv.className = 'important';

// Добавление в страницу
document.body.appendChild(newDiv);

// Удаление элемента
const oldDiv = document.getElementById('old');
oldDiv.remove();

// Вставка HTML
document.getElementById('container').innerHTML = '<p>Новое содержимое</p>';

4. Навигация по дереву DOM

const element = document.getElementById('my-element');

// Родитель
const parent = element.parentElement;

// Дети
const children = element.children;
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;

// Соседи
const nextSibling = element.nextElementSibling;
const prevSibling = element.previousElementSibling;

// Поиск по селектору
const nested = element.querySelector('.nested'); // первый
const allNested = element.querySelectorAll('.nested'); // все

5. Управление стилями

const div = document.getElementById('my-div');

// Inline стили
div.style.backgroundColor = 'blue';
div.style.fontSize = '20px';
div.style.display = 'none';

// CSS классы
div.classList.add('active');
div.classList.remove('disabled');
div.classList.toggle('visible');

// Проверка класса
if (div.classList.contains('highlight')) {
  console.log('Элемент выделен');
}

// Получение computed стилей
const styles = window.getComputedStyle(div);
console.log(styles.backgroundColor);

6. Работа с данными элемента

const element = document.querySelector('[data-id="user-123"]');

// Чтение data атрибутов
console.log(element.dataset.id); // "user-123"
console.log(element.dataset.userName); // из data-user-name

// Установка
element.dataset.userId = '456';

Почему DOM нужен именно в браузере

  1. Интерактивность — можем реагировать на действия пользователя в реальном времени
  2. Динамическое содержимое — не нужно перезагружать страницу для обновления
  3. Валидация форм — проверяем данные до отправки на сервер
  4. Анимации — создаём плавные переходы и эффекты
  5. SPA приложения — Single Page Applications полностью опираются на DOM для переключения контента

Проблемы работы с DOM напрямую

// BAD: сложно, медленно, подвержено ошибкам
for (let i = 0; i < 1000; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = 'Элемент ' + i;
  document.body.appendChild(newDiv); // перерисовка 1000 раз!
}

// GOOD: используем DocumentFragment или виртуальный DOM
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = 'Элемент ' + i;
  fragment.appendChild(newDiv);
}
document.body.appendChild(fragment); // одна перерисовка!

Современный подход: Виртуальный DOM (React, Vue)

Фреймворки используют виртуальный DOM — копию реального DOM в памяти. Это позволяет:

  • Оптимизировать обновления (batch updates)
  • Минимизировать прямые манипуляции с DOM
  • Улучшить производительность
  • Сделать код более декларативным
// React работает с виртуальным DOM, а не с реальным
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// React сам управляет обновлением реального DOM
// Мы описываем, что должно быть, а не как это делать

Заключение

ДОМ — это основной интерфейс взаимодействия с веб-страницей из JavaScript. Без DOM нельзя создавать интерактивные веб-приложения. Современные фреймворки (React, Vue, Angular) абстрагируют прямую работу с DOM, но всё равно опираются на него под капотом.

Зачем нужен DOM? | PrepBro