Зачем нужен Document Object Model (DOM)?

DOM позволяет программам (например, JavaScript) получать доступ к содержимому, структуре и стилям веб-документов (HTML, XML, SVG) и изменять их. Это API, которое представляет документ в виде структурированного дерева узлов.

Основные функции DOM:

• Представление документа: Преобразует исходный код документа в объектное представление.
• Доступ: Позволяет находить и выбирать элементы документа.
• Манипуляции: Дает возможность изменять содержимое, атрибуты и стили элементов, а также добавлять или удалять элементы.
• Обработка событий: Позволяет привязывать обработчики к событиям (клик, наведение и т.д.) на элементах документа.

Пример работы с DOM в JavaScript:

// Получаем элемент по его id
const element = document.getElementById('myElement');

// Изменяем его текст
element.textContent = 'Новый текст';

// Добавляем новый класс
element.classList.add('new-class');

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

// Добавляем новый элемент в тело документа
document.body.appendChild(newDiv);