Браузер: документ, события, интерфейсы

• Документ

  • Браузерное окружение, спецификации

  • DOM-дерево

  • Навигация по DOM-элементам

    • Дочерние элементы в DOM

    • Вопрос о соседях

    • Выделите ячейки по диагонали

  • Поиск: getElement*, querySelector*

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

  • Свойства узлов: тип, тег и содержимое

    • Считаем потомков

    • Что содержит свойство nodeType?

    • Тег в комментарии

    • Где в DOM-иерархии "document"?

  • Атрибуты и свойства

    • Получите атрибут

    • Сделайте внешние ссылки оранжевыми

  • Изменение документа

    • createTextNode vs innerHTML vs textContent

    • Очистите элемент

    • Почему остаётся "aaa"?

    • Создайте список

    • Создайте дерево из объекта

    • Выведите список потомков в дереве

    • Создайте календарь в виде таблицы

    • Цветные часы с использованием setInterval

    • Вставьте HTML в список

    • Сортировка таблицы

  • Стили и классы

    • Создать уведомление

  • Размеры и прокрутка элементов

    • Найти размер прокрутки снизу

    • Узнать ширину полосы прокрутки

    • Поместите мяч в центр поля

    • В чём отличие CSS-свойств width и clientWidth

  • Размеры и прокрутка окна

  • Координаты

    • Найдите координаты точек относительно окна браузера

    • Покажите заметку рядом с элементом

    • Покажите заметку около элемента (абсолютное позиционирование)

    • Расположите заметку внутри элемента (абсолютное позиционирование)

• Введение в события

  • Введение в браузерные события

    • Скрыть элемент по нажатию кнопки

    • Спрятать себя

    • Какой обработчик запустится?

    • Передвиньте мяч по полю

    • Создать раскрывающееся меню

    • Добавить кнопку закрытия

    • Карусель

  • Всплытие и погружение

  • Делегирование событий

    • Спрячьте сообщения с помощью делегирования

    • Раскрывающееся дерево

    • Сортируемая таблица

    • Поведение "подсказка"

  • Действия браузера по умолчанию

    • Почему не работает return false?

    • Поймайте переход по ссылке

    • Галерея изображений

  • Генерация пользовательских событий

• Интерфейсные события

  • Основы событий мыши

    • Выделяемый список

  • Движение мыши: mouseover/out, mouseenter/leave

    • Улучшенная подсказка

    • "Умная" подсказка

  • Drag'n'Drop с событиями мыши

    • Слайдер

    • Расставить супергероев по полю

  • Клавиатура: keydown и keyup

    • Отследить одновременное нажатие

  • События указателя

  • Прокрутка

    • Бесконечная страница

    • Кнопка вверх/вниз

    • Загрузка видимых изображений

• Формы, элементы управления

  • Свойства и методы формы

    • Добавьте пункт к выпадающему списку

  • Фокусировка: focus/blur

    • Редактируемый div

    • Редактирование TD по клику

    • Мышь, управляемая клавиатурой

  • События: change, input, cut, copy, paste

    • Депозитный калькулятор

  • Отправка формы: событие и метод submit

    • Модальное диалоговое окно с формой

• Загрузка документа и ресурсов

  • Страница: DOMContentLoaded, load, beforeunload, unload

  • Скрипты: async, defer

  • Загрузка ресурсов: onload и onerror

    • Загрузите изображения с колбэком

• Разное

  • MutationObserver: наблюдатель за изменениями

  • Selection и Range

  • Событийный цикл: микрозадачи и макрозадачи

    • Что код выведет в консоли?

    • Что код выведет в консоли?