7) Взаимодействие с DOM (Document Object Model)

Введение в DOM, добавление стилей и классов с примерами

Часть 1: Введение в DOM

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

Структура DOM:

Каждый HTML-элемент представлен узлом в дереве DOM.

Корневой узел — document, который представляет весь документ.

Навигация по DOM:

Использование методов getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll для доступа к элементам.

Изменение содержимого:

textContent, innerHTML для изменения текста и HTML-содержимого.

Часть 2: Добавление стилей

Изменение стилей элементов:

Использование свойства style у элемента.

Пример: element.style.color = ‘red’;

Добавление классов:

classList позволяет добавлять, удалять и переключать классы элемента.

Пример: element.classList.add(‘new-class’);

Часть 3: Примеры использования

Пример 1: Изменение стилей при событии:

Использование обработчиков событий для реагирования на действия пользователя.

Пример 2: Динамическое добавление классов:

• Изменение классов элементов в зависимости от услов

DOM и JavaScript позволяют создавать динамичные веб-страницы. Путем взаимодействия с DOM, вы можете изменять содержимое, структуру и стили, делая вашу веб-страницу более интерактивной и отзывчивой. Эти основы могут быть использованы для создания более сложных и мощных веб-приложений.

Домашняя работа:

Сделать контейнер(div), в нем должно лежать 4 — блока(div), а так же внутри блока должен лежать текст
Вы должны запрашивать у пользователя ширину блока, высоту блока, цвет и размер текста
После добавить их на сами элементы