Урок 11: Введение в DOM
DOM (Document Object Model) — это программный интерфейс для HTML и XML документов. Он представляет документ как дерево объектов, которые можно изменять с помощью JavaScript. В этом уроке мы рассмотрим, что такое DOM и как манипулировать элементами DOM.
Что такое DOM
DOM предоставляет структурированное представление документа, позволяя разработчикам легко изменять его содержимое и структуру. Каждому элементу HTML соответствует объект в DOM, что позволяет изменять элементы, их атрибуты и содержимое с помощью JavaScript.
Пример структуры DOM
Рассмотрим простой HTML документ:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Структура DOM для этого документа будет выглядеть следующим образом:
Манипуляции с элементами DOM
JavaScript предоставляет множество методов для работы с DOM. Рассмотрим некоторые из них.
Доступ к элементам DOM
Для доступа к элементам DOM можно использовать методы getElementById, getElementsByClassName, getElementsByTagName и querySelector.
// Доступ к элементам DOM
let header = document.getElementById('header');
let paragraphs = document.getElementsByClassName('paragraph');
let divs = document.getElementsByTagName('div');
let firstParagraph = document.querySelector('p');
let allParagraphs = document.querySelectorAll('p');
// Элементы DOM доступны для манипуляций
Изменение содержимого элементов
Для изменения содержимого элементов DOM можно использовать свойства innerHTML и textContent.
// Изменение содержимого элементов
let header = document.getElementById('header');
header.innerHTML = 'Welcome to the DOM tutorial';
let paragraph = document.querySelector('p');
paragraph.textContent = 'This is an updated paragraph.';
// Содержимое элементов изменено
Изменение стилей элементов
Для изменения стилей элементов DOM можно использовать свойство style.
// Изменение стилей элементов
let header = document.getElementById('header');
header.style.color = 'blue';
header.style.fontSize = '24px';
// Стили элементов изменены
Добавление и удаление элементов
Для добавления новых элементов в DOM можно использовать методы createElement, appendChild и insertBefore. Для удаления элементов используется метод removeChild.
// Добавление и удаление элементов
let newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph';
document.body.appendChild(newParagraph);
let oldParagraph = document.querySelector('p');
document.body.removeChild(oldParagraph);
// Элементы добавлены и удалены
Упражнения
Упражнение 1: Изменение содержимого элемента
Создайте HTML документ с заголовком <h1 id="header">Hello, World!</h1> и абзацем <p>This is a paragraph.</p>. Используйте JavaScript для изменения текста заголовка на "Welcome to JavaScript" и текста абзаца на "This is an updated paragraph".
Решение:
// HTML
<h1 id="header">Hello, World!</h1>
<p>This is a paragraph.</p>
// JavaScript
let header = document.getElementById('header');
header.innerHTML = 'Welcome to JavaScript';
let paragraph = document.querySelector('p');
paragraph.textContent = 'This is an updated paragraph.';
// Текст элементов изменен
Объяснение: Мы использовали метод getElementById для доступа к заголовку и метод querySelector для доступа к абзацу. Затем изменили их текст с помощью свойств innerHTML и textContent.
Упражнение 2: Добавление нового элемента
Создайте HTML документ с контейнером <div id="container"></div>. Используйте JavaScript для добавления нового абзаца <p>This is a new paragraph</p> внутрь контейнера.
Решение:
// HTML
<div id="container"></div>
// JavaScript
let container = document.getElementById('container');
let newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph';
container.appendChild(newParagraph);
// Новый абзац добавлен в контейнер
Объяснение: Мы использовали метод getElementById для доступа к контейнеру, метод createElement для создания нового элемента p и метод appendChild для добавления нового абзаца в контейнер.