Документ (DOM) on JSFlow

Браузерное окружение

Mon, 01 Jan 0001 00:00:00 +0000

Браузерное окружение #

Браузерное окружение — это набор объектов, которые JavaScript получает при выполнении на странице. Глобальный объект window представляет вкладку; document — загруженный HTML-документ. Вместе они образуют точку входа для любого UI-кода в JSFlow: от виджета «Активные сессии» до плеера плейлиста.

window — глобальная область вкладки #

В браузере глобальные переменные и функции становятся свойствами window:

window.JSFlow = { version: '1.0' }

function pingDashboard() {
 console.log('dashboard alive')
}

window.pingDashboard === pingDashboard // true

window также даёт доступ к размерам области просмотра и прокрутке:

DOM-дерево и навигация

Mon, 01 Jan 0001 00:00:00 +0000

DOM-дерево и навигация #

DOM-дерево — иерархическое представление HTML-документа, где каждый тег, текст и комментарий становится узлом (node). JavaScript может перемещаться по связям «родитель — потомок — сосед» и так находить нужные части интерфейса без повторного поиска по всей странице.

Типы узлов #

Основные типы, с которыми работает UI-код:

Тип	Константа	Пример
Элемент	`Node.ELEMENT_NODE` (1)	`<section class="widget">`
Текст	`Node.TEXT_NODE` (3)	`"3 трека в очереди"`
Комментарий	`Node.COMMENT_NODE` (8)	`<!-- skeleton -->`
Документ	`Node.DOCUMENT_NODE` (9)	`#document`

const trackTitle = document.querySelector('.track-title')
trackTitle.nodeType // 1
trackTitle.nodeName // "H3"
trackTitle.textContent // текст внутри, включая вложенные элементы

Родители и предки #

Подняться от элемента к контейнеру:

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

Mon, 01 Jan 0001 00:00:00 +0000

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

Поиск в DOM — первый шаг почти любого браузерного модуля: скрипт получает ссылку на узел и дальше читает данные или вешает обработчики. Современный код опирается на CSS-селекторы через querySelector и querySelectorAll; getElementById остаётся самым быстрым способом для уникальных якорей.

getElementById #

Ищет элемент по значению атрибута id. ID должен быть уникален в документе:

const checkoutForm = document.getElementById('checkout-form')
const playlistRoot = document.getElementById('playlist-root')

Эквивалент через селектор (кавычки в ID экранируйте при необходимости):

Свойства и атрибуты

Mon, 01 Jan 0001 00:00:00 +0000

Свойства и атрибуты #

Атрибуты — то, что записано в HTML (disabled, data-track-id). Свойства — поля JavaScript-объекта элемента; они могут расходиться с разметкой (например, value у <input>). Для UI JSFlow атрибуты data-* и классы часто хранят состояние, а свойства — отражают интерактивность формы.

Чтение и запись атрибутов #

const emailInput = document.querySelector('#checkout-email')

emailInput.getAttribute('type') // "email"
emailInput.setAttribute('aria-invalid', 'true')
emailInput.removeAttribute('readonly')
emailInput.hasAttribute('required') // true

getAttribute всегда возвращает строку или null. Булевы атрибуты в HTML (disabled, checked) присутствуют как пустая строка или имя атрибута:

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

Mon, 01 Jan 0001 00:00:00 +0000

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

Мутации DOM — создание, вставка, замена и удаление узлов. JavaScript может собирать интерфейс после загрузки данных: строки плейлиста, карточки метрик, шаги оформления заказа. Современные методы append, prepend, remove и replaceWith короче, чем связка appendChild / removeChild.

createElement и текст #

const li = document.createElement('li')
li.className = 'track-row'
li.dataset.trackId = 'tr-901'

const title = document.createElement('span')
title.className = 'track-row__title'
title.textContent = 'Midnight Loop'

li.append(title)

textContent безопаснее innerHTML, если строка приходит из API и может содержать символы <.

Стили, размеры, координаты

Mon, 01 Jan 0001 00:00:00 +0000

Стили, размеры, координаты #

Геометрия и стили элемента нужны, когда UI реагирует на размер окна, рисует оверлеи или фиксирует панель checkout. JavaScript читает вычисленные размеры через getBoundingClientRect, меняет оформление через classList и inline-стили element.style.

classList #

Классы — основной способ переключать состояние без inline-CSS:

const bar = document.querySelector('.checkout-bar')

bar.classList.add('is-visible')
bar.classList.remove('is-hidden')
bar.classList.toggle('is-compact', window.innerWidth < 768)

bar.classList.replace('theme-light', 'theme-dark')

Несколько классов за раз:

document.querySelector('.playlist-panel').classList.add('is-open', 'has-focus')

Состояние виджета «свернут»:

function setWidgetCollapsed(widgetEl, collapsed) {
 widgetEl.classList.toggle('widget--collapsed', collapsed)
 widgetEl.setAttribute('aria-expanded', String(!collapsed))
}

Inline-стили: element.style #

Inline-стили задают конкретные CSS-свойства в camelCase: