Что такое DOM (Document Object Model)?

DOM (Document Object Model)

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

Структура DOM

• Узлы (Nodes) — элементы, атрибуты, текст
• Элементы (Elements) — HTML теги
• Атрибуты (Attributes) — свойства элементов
• Текстовые узлы — содержимое элементов

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

 1// Поиск элементов
 2document.getElementById('id');
 3document.querySelector('.class');
 4document.getElementsByTagName('div');
 5
 6// Создание элементов
 7const newElement = document.createElement('div');
 8newElement.textContent = 'Hello World';
 9
10// Добавление в DOM
11document.body.appendChild(newElement);
12
13// Удаление из DOM
14element.remove();

События DOM

• click — клик по элементу
• load — загрузка документа
• submit — отправка формы
• change — изменение значения
• keydown/keyup — нажатие клавиш

Манипуляции с DOM

• Изменение содержимого — innerHTML, textContent
• Изменение стилей — style, classList
• Изменение атрибутов — setAttribute, getAttribute
• Навигация по дереву — parentNode, children

Пример работы с событиями

 1// Добавление обработчика событий
 2const button = document.getElementById('myButton');
 3button.addEventListener('click', function() {
 4    alert('Кнопка нажата!');
 5});
 6
 7// Изменение стилей
 8const element = document.querySelector('.my-class');
 9element.style.backgroundColor = 'red';
10element.classList.add('active');

FAQ

В чем разница между innerHTML и textContent?

innerHTML работает с HTML разметкой, textContent — только с текстом, игнорируя HTML теги.

Что быстрее: getElementById или querySelector?

getElementById быстрее, так как использует индексированный поиск по ID, а querySelector парсит CSS селектор.