Урок 6 · Слайд 1
🌳

DOM как дерево

HTML — это дерево объектов в памяти браузера

html
├─head→title
└─body
├─h1"Заголовок"
├─p"Текст"
└─button"Нажми"

DOM (Document Object Model) — это представление HTML как дерева. Браузер читает HTML и создаёт такое дерево в памяти. JavaScript может изменять любой узел этого дерева!

📖 Словарик
DOM
Document Object Model — дерево объектов HTML-документа.
"JS взаимодействует со страницей через DOM"
Узел (Node)
Любой элемент дерева DOM: тег, текст, атрибут.
"h1, p, button — это узлы DOM"
document
Глобальный объект JS, представляющий всю страницу.
"document — это корень дерева DOM"
Урок 6 · Слайд 2
🔎

querySelector и querySelectorAll

Находим элементы на странице

script.js
// Найти ОДИН элемент (первый подходящий)
const заголовок = document.querySelector('h1');
const кнопка = document.querySelector('#myBtn');
const карточка = document.querySelector('.card');

// Найти ВСЕ подходящие элементы
const все_карточки = document.querySelectorAll('.card');

// Перебрать все найденные элементы
все_карточки.forEach(карточка => {
  карточка.style.background = '#f3e5f5';
});

// Нашли 3 карточки и покрасили каждую!
📖 Словарик
querySelector
Находит первый элемент, совпадающий с CSS-селектором.
"querySelector('.card') — первая карточка"
querySelectorAll
Находит ВСЕ элементы, совпадающие с CSS-селектором.
"querySelectorAll('li') — все пункты списка"
forEach
Перебирает каждый элемент коллекции.
"forEach выполняет функцию для каждого найденного элемента"
Урок 6 · Слайд 3
🏷️

classList: add / remove / toggle

Управляем CSS-классами через JavaScript

script.js
const блок = document.querySelector('.блок');

// Добавить класс
блок.classList.add('активный');

// Удалить класс
блок.classList.remove('скрытый');

// Переключить: есть — убрать, нет — добавить
блок.classList.toggle('тёмная-тема');

// Проверить, есть ли класс
if (блок.classList.contains('активный')) {
  console.log('Блок активен!');
}
📖 Словарик
classList
Свойство элемента для управления его CSS-классами.
"element.classList даёт доступ к классам"
classList.toggle
Переключает класс: если есть — удаляет, если нет — добавляет.
"toggle('dark') включает/выключает тёмную тему"
classList.contains
Проверяет, есть ли класс у элемента (true/false).
"contains('active') вернёт true если класс есть"
Урок 6 · Слайд 4
🏗️

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

Добавляем новые теги через JavaScript

script.js
// 1. Создаём новый элемент
const новая_карточка = document.createElement('div');

// 2. Наполняем содержимым и классом
новая_карточка.textContent = 'Новая карточка!';
новая_карточка.classList.add('card');

// 3. Добавляем в документ
const список = document.querySelector('.список');
список.appendChild(новая_карточка);

// Удалить элемент:
новая_карточка.remove();
// Карточка исчезла со страницы
📖 Словарик
createElement
Создаёт новый HTML-элемент в памяти.
"createElement('div') создаёт пустой div"
appendChild
Добавляет элемент в конец родителя.
"list.appendChild(item) добавил пункт в список"
remove()
Удаляет элемент из документа.
"element.remove() убирает элемент со страницы"
Урок 6 · Слайд 5
👂

События: click, input, keydown

Реагируем на действия пользователя

script.js
// Клик по кнопке
document.querySelector('button')
  .addEventListener('click', () => {
    console.log('Нажали кнопку!');
  });

// Ввод в поле
document.querySelector('input')
  .addEventListener('input', (e) => {
    console.log('Текст:', e.target.value);
  });

// Нажатие клавиши
document.addEventListener('keydown', (e) => {
  console.log('Нажата клавиша:', e.key);
});
📖 Словарик
Event (событие)
Действие пользователя: клик, ввод, нажатие клавиши.
"'click', 'input', 'keydown' — типы событий"
e.target
Элемент, на котором произошло событие.
"e.target.value — значение поля ввода"
e.key
Название нажатой клавиши.
"e.key === 'Enter' — нажат Enter"
Урок 6 · Слайд 6
💾

localStorage: сохраняем данные

Данные остаются даже после закрытия вкладки

script.js
// Сохранить строку
localStorage.setItem('имя', 'Алиса');

// Прочитать строку
let имя = localStorage.getItem('имя');
console.log(имя); // 'Алиса'

// Сохранить объект (нужен JSON)
let задачи = ['Учиться', 'Кодить'];
localStorage.setItem('tasks', JSON.stringify(задачи));

// Прочитать объект
let из_хранилища = JSON.parse(localStorage.getItem('tasks'));

// Удалить
localStorage.removeItem('имя');
📖 Словарик
localStorage
Хранилище браузера для данных без срока давности.
"localStorage сохраняет настройки между сессиями"
JSON.stringify
Превращает объект/массив в строку для хранения.
"JSON.stringify([1,2,3]) → '[1,2,3]'"
JSON.parse
Превращает строку обратно в объект/массив.
"JSON.parse('[1,2,3]') → [1, 2, 3]"
Урок 6 · Слайд 7
✅

Мини-проект: список задач

Используй все знания о DOM!

1
Создай input для ввода задачи и кнопку "Добавить"
2
При клике — создай новый li через createElement и добавь в ul
3
При клике на задачу — переключай класс "выполнено" через classList.toggle
4
Добавь кнопку "×" рядом с каждой задачей для её удаления
5
Сохраняй список в localStorage — чтобы задачи не терялись при обновлении
6
Загружай задачи из localStorage при открытии страницы 🏆