4.1 DOM: основы работы с документом
9 из 9 шагов пройдено
8 из 8 баллов  получено

Урок 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 открывает перед разработчиками широкие возможности для создания интерактивных и динамичных веб-приложений.


Будьте вежливы и соблюдайте наши принципы сообщества. Пожалуйста, не оставляйте решения и подсказки в комментариях, для этого есть отдельный форум.
Оставить комментарий
Нет обсуждений. Начните первое.