Урок 4.1: DOM (Document Object Model): основы работы с документом
Цели урока:
- Понять, что такое DOM и как он связан с HTML-документами.
- Изучить основные методы для работы с элементами DOM.
- Научиться создавать, изменять и удалять элементы DOM.
Введение
DOM (Document Object Model) — это программный интерфейс, который позволяет скриптам изменять содержимое, структуру и стиль веб-страниц. DOM представляет документ как иерархическое дерево элементов, позволяя программам динамически менять текст, структуру и стили страницы.
1. Что такое DOM?
- DOM делает всю HTML-страницу доступной для скриптов как объект, с которым можно взаимодействовать.
- Каждый HTML-тег представлен в DOM узлом (или элементом), и все эти узлы связаны как дерево.
- С помощью JavaScript можно читать и изменять DOM, реагировать на действия пользователя.
2. Выбор элементов
- По ID:
let element = document.getElementById("myId");
- По классу:
let elements = document.getElementsByClassName("myClass");
- По тегу:
let elements = document.getElementsByTagName("p");
- Современные селекторы:
let element = document.querySelector(".myClass"); // Возвращает первый элемент, соответствующий селектору
let elements = document.querySelectorAll(".myClass"); // Возвращает все элементы, соответствующие селектору
3. Работа с элементами
- Изменение содержимого:
element.textContent = "Новый текст"; // Изменяет текстовое содержимое элемента
element.innerHTML = "<b>Жирный текст</b>"; // Изменяет HTML-содержимое элемента
- Создание элементов:
let newElement = document.createElement("div");
newElement.textContent = "Новый элемент";
document.body.appendChild(newElement); // Добавляет элемент в конец body
- Удаление элементов:
element.remove(); // Удаляет элемент из DOM
- Изменение атрибутов и стилей:
element.setAttribute("href", "https://example.com");
element.style.color = "red"; // Изменяет стиль элемента
4. События в DOM
- Добавление обработчика событий:
element.addEventListener("click", function() {
alert("Элемент кликнут");
});
Задание для самостоятельной работы
1. Создайте HTML-страницу с несколькими параграфами текста и одной кнопкой.
2. Используя JavaScript, сделайте так, чтобы при нажатии на кнопку цвет текста во всех параграфах менялся на случайный.
Заключение
DOM является мостом между веб-страницами и скриптами, позволяя динамически изменять содержимое и структуру документа. Овладение основами работы с DOM открывает перед разработчиками широкие возможности для создания интерактивных и динамичных веб-приложений.