← Назад к курсу

Пособие по HTML5 и DOM

Это подробное пособие по HTML5 и DOM (Document Object Model). Оно охватывает ключевые концепции, новые возможности HTML5 и практическую работу с DOM через JavaScript.

1. Введение в HTML5

HTML5 — это последняя (на момент написания) эволюция стандарта HTML. Он привносит:

Семантические теги (<header>, <nav>, <article>, <section>…)
Встроенную поддержку мультимедиа (<audio>, <video>)
API для графики (<canvas>, SVG)
Расширенные возможности для веб-приложений (геолокация, веб-хранилища, офлайн-режим)

Важно: HTML5 ≠ просто «версия HTML». Это комплекс из HTML, CSS3 и JavaScript API.

1.1 Базовая структура HTML5-документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой современный сайт</title>
</head>
<body>
    <header>Шапка сайта</header>
    <main>Основное содержание</main>
    <footer>Подвал</footer>
</body>
</html>

2. Семантические теги HTML5 (смысловые блоки)

Вместо безликих <div> используйте:

Тег	Назначение
<header>	вводная часть или навигация для раздела
<nav>	блок навигационных ссылок
<main>	уникальное основное содержимое страницы
<article>	самостоятельная запись (пост, новость, комментарий)
<section>	логическая часть документа (обычно с заголовком)
<aside>	побочная информация (сайдбар, реклама)
<footer>	подвал страницы или раздела

Пример:

<article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи…</p>
    <footer>Автор: Иван, дата: 01.01.2025</footer>
</article>

3. Document Object Model (DOM)

DOM — это программный интерфейс, который представляет HTML-документ в виде дерева узлов. Каждый тег, атрибут, текст — это узел.

HTML
 ├── HEAD
 │    └── TITLE
 └── BODY
      ├── H1
      ├── P
      └── DIV
           └── SPAN

3.1 Почему DOM важен?

JavaScript может читать / изменять структуру, стили и содержимое страницы.
Браузер после загрузки строит DOM, и любой динамический код работает именно с ним, а не с исходным HTML.

3.2 Типы узлов (основные)

Тип узла	Константа	Пример
Элемент	1	<div>
Текст	3	текст внутри тега
Атрибут	2	class="my"
Документ	9	document

4. Работа с DOM через JavaScript

Все начинается с глобального объекта document.

4.1 Поиск элементов

// По id (возвращает один элемент)
const header = document.getElementById('main-header');

// По классу (коллекция)
const items = document.getElementsByClassName('menu-item');

// По тегу
const paragraphs = document.getElementsByTagName('p');

// Современные методы (используйте их!)
const btn = document.querySelector('.btn-primary');        // первый элемент
const allBtns = document.querySelectorAll('.btn');        // все элементы

4.2 Чтение и изменение содержимого

// Текст
elem.textContent = "Новый текст";        // безопасно, без HTML
elem.innerText = "Другой текст";         // учитывает стили (медленнее)

// HTML-содержимое
elem.innerHTML = "<strong>Жирный</strong> текст";  // можно вставить HTML

// Значение полей ввода
const value = inputElement.value;
inputElement.value = "Привет";

4.3 Работа с атрибутами и классами

// Атрибуты
img.getAttribute('src');
img.setAttribute('alt', 'Описание картинки');
img.hasAttribute('target');

// Классы
div.classList.add('active');
div.classList.remove('hidden');
div.classList.toggle('open');
div.classList.contains('active');   // true/false

4.4 Изменение стилей (CSS)

// Инлайн-стили (перетирают CSS)
elem.style.color = 'red';
elem.style.fontSize = '20px';    // camelCase вместо font-size
elem.style.display = 'none';     // скрыть

Для чтения реальных стилей (из CSS) используйте getComputedStyle(elem).

5. События и обработчики

DOM позволяет реагировать на действия пользователя: клик, ввод текста, движение мыши и т.д.

5.1 Способы назначения обработчиков

// 1. Через свойство (можно только один обработчик)
button.onclick = function() {
    alert('Клик!');
};

// 2. Современный способ (addEventListener) — можно много обработчиков
button.addEventListener('click', () => {
    console.log('Клик по кнопке');
});

button.addEventListener('click', function(event) {
    console.log(event.target); // элемент, на котором кликнули
});

5.2 Популярные типы событий

Мышь: click, dblclick, mouseenter, mouseleave, mousemove
Клавиатура: keydown, keyup, keypress
Формы: submit, change, input, focus, blur
Документ/окно: DOMContentLoaded, load, scroll, resize

5.3 Всплытие событий (event bubbling)

Клик на вложенном элементе вызовет обработчики на всех родителях (по цепочке). Чтобы остановить:

child.addEventListener('click', (event) => {
    event.stopPropagation();  // не пойдёт выше
});

6. Создание и удаление элементов

Динамически управляем структурой страницы.

// Создать новый элемент
const newDiv = document.createElement('div');
newDiv.textContent = 'Я появился динамически!';
newDiv.className = 'dynamic-box';

// Вставить в DOM
parentElement.appendChild(newDiv);         // в конец
parentElement.prepend(newDiv);             // в начало
parentElement.insertBefore(newDiv, referenceElement);

// Удалить элемент
elem.remove();                             // современный способ
parent.removeChild(child);                 // классический

Пример: создание списка из массива

<ul id="todo-list"></ul>
<script>
    const tasks = ['Купить молоко', 'Прочитать пособие', 'Написать код'];
    const list = document.getElementById('todo-list');

    tasks.forEach(task => {
        const li = document.createElement('li');
        li.textContent = task;
        list.appendChild(li);
    });
</script>

7. Практические примеры

7.1 Счетчик кликов (игра с DOM)

<button id="clicker">Нажми меня</button>
<p>Кликов: <span id="counter">0</span></p>

<script>
    let count = 0;
    const btn = document.getElementById('clicker');
    const counterSpan = document.getElementById('counter');

    btn.addEventListener('click', () => {
        count++;
        counterSpan.textContent = count;
    });
</script>

7.2 Добавление / удаление элемента

<input type="text" id="taskInput" placeholder="Новая задача">
<button id="addBtn">Добавить</button>
<ul id="taskList"></ul>

<script>
    const input = document.getElementById('taskInput');
    const addBtn = document.getElementById('addBtn');
    const taskList = document.getElementById('taskList');

    addBtn.addEventListener('click', () => {
        const taskText = input.value.trim();
        if (taskText === '') return;

        const li = document.createElement('li');
        li.textContent = taskText;
        
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '❌';
        deleteBtn.style.marginLeft = '10px';
        deleteBtn.onclick = () => li.remove();
        
        li.appendChild(deleteBtn);
        taskList.appendChild(li);
        input.value = '';
    });
</script>

7.3 Показать/скрыть блок (toggle)

<button id="toggleBtn">Показать справку</button>
<div id="helpBox" style="display: none;">
    Это всплывающая подсказка. DOM позволяет менять стили!
</div>

<script>
    const btn = document.getElementById('toggleBtn');
    const box = document.getElementById('helpBox');

    btn.addEventListener('click', () => {
        if (box.style.display === 'none') {
            box.style.display = 'block';
            btn.textContent = 'Скрыть справку';
        } else {
            box.style.display = 'none';
            btn.textContent = 'Показать справку';
        }
    });
</script>

8. Современные возможности HTML5 (кратко)

API	Назначение
<canvas>	рисование графики на JavaScript (игры, графики)
<video> / <audio>	встраивание медиа без Flash
LocalStorage / SessionStorage	сохранение данных в браузере
Геолокация (navigator.geolocation)	получение координат пользователя
Drag & Drop	встроенный перенос элементов
Web Workers	многопоточность в браузере
History API	управление историей без перезагрузки (SPA)

Пример сохранения данных (LocalStorage)

// Сохранить
localStorage.setItem('theme', 'dark');

// Прочитать
const theme = localStorage.getItem('theme'); // 'dark'

// Удалить
localStorage.removeItem('theme');

9. Рекомендации и лучшие практики

Загружайте скрипты в конце <body> или используйте defer/async, чтобы DOM уже был готов.
Кэшируйте DOM-узлы — не ищите один элемент каждый раз заново.
Используйте textContent вместо innerHTML, если не нужно вставлять HTML (безопаснее и быстрее).
Минимизируйте перерисовки — при массовых изменениях используйте documentFragment или собирайте изменения вне живого DOM.
Изучите DevTools — вкладка Elements показывает DOM в реальном времени, а Console позволяет выполнять JS-команды.

10. Заключение

HTML5 даёт структуру и семантику, а DOM — полный контроль над страницей из JavaScript. Вы уже умеете:

Создавать семантическую разметку
Находить и изменять элементы
Реагировать на события
Динамически создавать / удалять узлы
Использовать простые API (localStorage, canvas)

Дальнейшее обучение:

Изучите fetch для работы с сервером (AJAX)
Попробуйте фреймворки (React, Vue) — они работают поверх DOM
Почитайте спецификацию DOM Living Standard на MDN

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

Пособие создано как база для дальнейшего углубления в веб-технологии. Удачи в кодинге!