Урок 4.2: Изменение структуры и стиля документа
Цели урока:
- Научиться изменять структуру HTML-документа с помощью JavaScript.
- Изучить методы для добавления, удаления и замены элементов в DOM.
- Понять, как изменять стили элементов для управления внешним видом веб-страницы.
Введение
JavaScript предоставляет мощные инструменты для динамического изменения структуры и стиля веб-страниц. Это позволяет разработчикам создавать интерактивные и адаптивные пользовательские интерфейсы.
Изменение структуры документа
1. Добавление элементов:
- `appendChild()` - добавляет элемент в конец родительского элемента.
- `insertBefore()` - вставляет элемент перед указанным элементом.
let newElement = document.createElement("div");
newElement.textContent = "Новый элемент";
document.body.appendChild(newElement); // Добавление в конец body
2. Удаление элементов:
- `removeChild()` - удаляет ребенка из родительского элемента.
- `remove()` - удаляет элемент из его родителя в DOM.
let element = document.getElementById("elementId");
element.remove(); // Удаление элемента
3. Замена элементов:
- `replaceChild(newChild, oldChild)` - заменяет один дочерний элемент другим.
let parent = document.getElementById("parentId");
let newElement = document.createElement("span");
let oldElement = document.getElementById("oldElementId");
parent.replaceChild(newElement, oldElement);
Изменение стилей элементов
1. Изменение CSS стилей:
- Для изменения стилей элемента используйте свойство `style` объекта.
let element = document.getElementById("elementId");
element.style.color = "blue"; // Изменение цвета текста
element.style.marginTop = "20px"; // Изменение отступа сверху
2. Работа с классами:
- `classList.add()` - добавляет класс к элементу.
- `classList.remove()` - удаляет класс у элемента.
- `classList.toggle()` - переключает класс.
let element = document.getElementById("elementId");
element.classList.add("new-class"); // Добавление класса
element.classList.remove("old-class"); // Удаление класса
element.classList.toggle("active"); // Переключение класса
Задание для самостоятельной работы
1. Создайте веб-страницу с несколькими параграфами текста и кнопкой.
2. При нажатии на кнопку измените стиль каждого параграфа (например, измените цвет текста и добавьте рамку).
3. Добавьте новый элемент с текстом в конец документа каждый раз, когда нажимается кнопка.
Заключение
Изменение структуры и стиля документа с помощью JavaScript позволяет разработчикам создавать динамичные веб-страницы, которые могут адаптироваться и реагировать на действия пользователя. Овладение этими навыками является ключевым для разработки современных веб-приложений и сайтов.