Браузер: документ, події, інтерфейси

• Документ

  • Браузерне середовище, специфікації

  • DOM дерево

  • Навігація по DOM

    • Діти у DOM

    • Питання про сусідів

    • Виділіть усі діагональні клітинки

  • Пошук: getElement*, querySelector*

    • Пошук елементів

  • Властивості вузлів: тип, тег та вміст

    • Підрахувати нащадків

    • Що в nodeType?

    • Тег у коментарі

    • Де "document" в ієрархії?

  • Атрибути та властивості

    • Отримайте атрибут

    • Зробіть зовнішні посилання помаранчевими

  • Внесення змін в документ

    • createTextNode проти innerHTML проти textContent

    • Очистіть елемент

    • Чому "aaa" залишається?

    • Створіть список

    • Створіть дерево з об’єкту

    • Показати нащадків в дереві

    • Створіть календар

    • Розфарбуйте годиник за допомогою setInterval

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

    • Відсортуйте таблицю

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

    • Створити сповіщення

  • Розмір і прокрутка елемента

    • Що прокрутиться від низу?

    • Яка ширина смуги прокрутки?

    • Помістіть м'яч у центр поля

    • Відмінності: CSS ширина проти clientWidth

  • Розміри вікна і прокрутка

  • Координати

    • Знайти координати поля відносно вікна

    • Покажіть примітку біля елемента

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

    • Розташуйте примітку всередині елемента (абсолютне позиціювання)

• Вступ до подій

  • Вступ до подій браузера

    • Приховати елемент після натискання кнопки

    • Сховати себе

    • Який обробник запуститься?

    • Пересуньте м’яч по полю

    • Створіть меню, що розкривається

    • Додати кнопку закриття

    • Карусель

  • Бульбашковий механізм (спливання та занурення)

  • Делегування подій

    • Приховайте повідомлення за допомогою делегування

    • Деревоподібне меню

    • Sortable table

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

  • Типові дії браузера

    • Чому "return false" не працює?

    • Зловіть посилання

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

  • Запуск користувацьких подій

• Події інтерфейсу

  • Події миші

    • Список для виділення

  • Переміщення миші: mouseover/out, mouseenter/leave

    • Покращена поведінка спливаючої підказки

    • "Розумна" підказка

  • Drag'n'Drop з подіями миші

    • Слайдер

    • Розставте супергероїв полем

  • Події вказівника

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

    • Розширені комбінації гарячих клавіш

  • Прокрутка

    • Нескінченна сторінка

    • Кнопка вгору/вниз

    • Завантаження видимих зображень

• Форми та інтерактивні елементи

  • Властивості та методи форми

    • Додайте нову опцію до елемента `<select>`

  • Фокусування: focus/blur

    • div, який можна відредагувати

    • Редагувати TD по кліку

    • Миша, керована з клавіатури

  • Події: change, input, cut, copy, paste

    • Калькулятор депозиту

  • Форми: подія та метод submit

    • Модальна форма

• Завантаження документа і ресурсів

  • Сторінка: DOMContentLoaded, load, beforeunload, unload

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

  • Завантаження ресурсів: onload та onerror

    • Завантажте зображення з колбеком

• Різне

  • Mutation Observer (спостерігач за мутаціями)

  • Selection і Range

  • Цикл подій (event loop): мікрозавдання (microtasks) та макрозавдання (macrotasks)

    • Що буде результатом цього коду?