JavaScript DOM с 0 до Профи. Полный курс + Практика

DOM — это представление HTML-документа в виде дерева объектов, с которым можно работать через JavaScript. В этом видео мы рассмотрим, что такое Document object model и как браузер создает DOM при загрузке страницы. Без DOM in javascript веб-страницы были бы статичны, а с его помощью мы можем динамически изменять контент. Менторство до трудоустройства: https://reactify.ru
Тренажер собеседований: https://yeahub.ru/
Отзывы: https://t.me/mentor_reactify
Telegram канал: https://t.me/reactify_IT
Записи занятий с менторства: https://t.me/reactify_community_bot
00:00:00 DOM — дерево объектов HTML-документа, доступное через document. 00:00:57 JavaScript меняет DOM для динамического обновления интерфейса. 00:01:54 Типы узлов DOM: элементы, текст, атрибуты, документ. 00:02:50 Основные объекты DOM: document, element, node. 00:04:01 Дополнительные объекты: window и event для работы с браузером. 00:05:00 Методы поиска: getElementById, querySelector, querySelectorAll. 00:06:53 HTMLCollection живая, NodeList — статичный снимок элементов. 00:07:53 Настройка проекта: HTML, CSS, JavaScript. 00:08:17 Подключение JS через defer или перед body. 00:09:13 getElementById для изменения стилей элемента. 00:10:10 getElementsByClassName для работы с несколькими элементами. 00:11:07 Платформа YeaHub для подготовки к собеседованиям. 00:13:05 Навигация по DOM: children, parentNode, nextElementSibling. 00:15:01 Node — базовый блок, Element — HTML-тег. 00:16:56 Методы closest и parent для поиска элементов. 00:18:20 childNodes включает текст и комментарии, children — только элементы. 00:19:19 Element — частный случай Node (теги). 00:20:16 Изменение контента: textContent, innerHTML, outerHTML. 00:21:15 Работа с атрибутами: getAttribute, setAttribute, removeAttribute. 00:22:09 classList для добавления, удаления и переключения классов. 00:23:06 Изменение стилей через style и getComputedStyle. 00:24:55 Примеры: innerHTML для вставки HTML, outerHTML для замены. 00:27:02 setAttribute для добавления атрибутов, removeAttribute для удаления. 00:28:55 classList.add/remove/toggle для управления классами. 00:29:29 Добавление класса при клике через classList. 00:30:27 Изменение стилей через JS, избегая избыточной верстки. 00:31:55 HTML — структура, CSS — стили, JS — интерактивность. 00:32:55 Создание элементов: document.createElement, методы вставки. 00:34:20 Удаление элементов: removeChild, remove. 00:35:18 Динамическая разметка: создание списков, кнопок, текста. 00:36:37 События: клики, клавиатура, формы, загрузка страницы. 00:38:33 Добавление/удаление обработчиков для оптимизации. 00:39:22 Объект event: тип, цель, координаты, preventDefault. 00:40:21 Фазы событий: захват, цель, всплытие. 00:42:13 Пример вложенных элементов и всплытия событий. 00:43:14 stopPropagation для отмены всплытия, делегирование событий. 00:45:03 Управление прокруткой: scrollTo, scrollBy. 00:46:03 События — основа интерактивности (клики, формы, клавиатура). 00:48:53 Практика: создание планировщика задач. 00:51:30 Обработка формы: перехват данных, вставка задач. 00:52:28 Поиск формы через getElementById. 00:53:52 Добавление события submit, отмена дефолтного поведения. 00:54:50 Получение значения инпута через value. 00:55:47 Создание элемента задачи через createElement. 00:57:33 Добавление задачи в список через appendChild. 00:58:58 Функция для создания задачи с текстом из инпута. 01:00:46 Обработка удаления задачи через событие клика. 01:13:43 Делегирование событий для оптимизации. 01:15:40 Идентификация задач через data-task-id. 01:18:09 Обновление задач, поиск по ID при клике. 01:19:01 Разделение событий: удаление и изменение статуса. 01:21:37 Оптимизация кода через шаблоны и делегирование. 01:23:27 DOM API — основа фронтенд-разработки. 01:24:26 Практика: калькулятор, погода, онлайн-кинотеатр. 01:26:26 Использование бесплатных API и макетов для проектов. 01:26:26 Заключение #frontend #javascript