К списку уроков

Урок 6. DOM, CSS, JS

Онлайн и в Б-835, 14 октября (вторник), 15:15

На этом занятии мы познакомимся, как взаимодействовать с нашим DOM деревом, сделаем первые интерактивные элементы. Изучим понятия, всплытие и погружение, изучим event listener и конечно же попрактикуемся на занятии.

DOM

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. 
Текст, который находится внутри тега, также является объектом.


Объект window

  • Window — глобальный объект, представляющий окно браузера или вкладку.

  • Свойство window.document содержит DOM текущей страницы.

  • window предоставляет методы управления окном: открытие (window.open()), закрытие (window.close()),

  • Window.innerWidth и window.innerHeight для получения данных о размере экрана

  • Window.scrollTo(x, y) прокучивает на заданные координаты

  • Window.navigator предоставляет информацию о браузере и устройстве пользователя

  • Window.location отвечает за текущий URL и навигацию страницы.

Поиск элемента DOM-дерева

  • Поиск по id - document.getElementById("header");

  • Поиск по классу (возвращает коллекцию) - document.getElementsByClassName("item");

  • Поиск по тегу (возвращает коллекцию) - let paragraphs = document.getElementsByTagName("p");

  • Современные методы (более гибкие)
    let element = document.querySelector(".my-class");
    let allElements = document.querySelectorAll("div.item");

Методы JS для взаимодействия с DOM

  • document.createElement(tag) — создать новый элемент DOM.

  • element.appendChild(child) — добавить элемент в конец дочерних элементов.

  • element.remove() — удалить элемент из DOM.

  • element.innerHTML — получить или установить HTML-содержимое элемента.

  • element.textContent — получить или установить текстовое содержимое элемента.

  • element.style — доступить и изменить CSS-стили элемента.

Методы JS для взаимодействия с классами

  • element.classList.add('className') — добавляет класс к элементу.

  • element.classList.remove('className') — удаляет класс из элемента.

  • element.classList.toggle('className') — переключает наличие класса (добавляет, если нет, и удаляет, если есть).

  • element.classList.contains('className') — проверяет, есть ли класс у элемента (возвращает true/false).

  • element.classList.replace('oldClass', 'newClass') — заменяет один класс на другой.

Event listener

Метод addEventListener() интерфейса EventTarget устанавливает функцию, которая будет вызываться каждый раз, когда указанное событие будет достигать цели.

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

options

  • capture – cобытия указанного типа будут отправлены
 зарегистрированному слушателю listener перед
 отправкой любой EventTarget ниже(глубже) в DOM-дереве.

  • once – значение, указывающее, что listener должен быть вызван только один раз после добавления.

  • passive – значение, указывающее, что listener никогда не вызовет preventDefault().

  • signal – cлушатель будет удалён при вызове метода abort() данного объекта AbortSignal.

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

  • Когда событие происходит на элементе, сначала оно "погружается" сверху вниз до элемента - это погружение.

  • После этого целевого элемента событие "всплывает" обратно вверх через родителей - это всплытие.

  • Обычно обработчики срабатывают на этапе всплытия.

  • Можно управлять всплытием через capture в addEventListener.

Задания