О лосях

Часть 2 Браузер: документ, события, интерфейсы Илья Кантор Сборка от 6 сентября 2019 г. Последняя версия учебника находится на сайте Мы постоянно работаем над улучшением учебника. При обнаружении ошибок пишите о них на нашем баг-трекере. Документ Браузерное окружение, спецификации DOM-дерево Навигация по DOM-элементам Поиск: getElement*, querySelector* Свойства узлов: тип, тег и содержимое Атрибуты и свойства Изменение документа Стили и классы Размеры и прокрутка элементов Размеры и прокрутка окна Координаты Введение в события Введение в браузерные события Всплытие и погружение Делегирование событий Действия браузера по умолчанию Генерация пользовательских событий Интерфейсные события Основы событий мыши Движение мыши: mouseover/out, mouseenter/leave Drag'n'Drop с событиями мыши Клавиатура: keydown и keyup Прокрутка Формы, элементы управления Свойства и методы формы Фокусировка: focus/blur События: change, input, cut, copy, paste Отправка формы: событие и метод submit Загрузка документа и ресурсов Страница: DOMContentLoaded, load, beforeunload, unload Скрипты: async, defer Загрузка ресурсов: onload и onerror Разное MutationObserver: наблюдатель за изменениями Selection и Range Событийный цикл: микрозадачи и макрозадачи Изучаем работу со страницей – как получать элементы, манипулировать их размерами, динамически создавать интерфейсы и взаимодействовать с посетителем. Документ Здесь мы научимся изменять страницу при помощи JavaScript. Браузерное окружение, спецификации Язык JavaScript изначально был создан для веб-браузеров. Но с тех пор он значительно эволюционировал и превратился в кроссплатформенный язык программирования для решения широкого круга задач. Сегодня JavaScript может использоваться в браузере, на веб-сервере или в какой-то другой среде, даже в кофеварке. Каждая среда предоставляет свой функционал, который спецификация JavaScript называет окружением. Окружение предоставляет свои объекты и дополнительные функции, в дополнение базовым языковым. Браузеры, например, дают средства для управления веб-страницами. Node.js делает доступными какие-то серверные возможности и так далее. На картинке ниже в общих чертах показано, что доступно для JavaScript в браузерном окружении: window DOM BOM JavaScript document navigator Object screen Array location Function frames history XMLHttpRequest Как мы видим, имеется корневой объект window , который выступает в 2 ролях: 1. Во-первых, это глобальный объект для JavaScript-кода, об этом более подробно говорится в главе Глобальный объект. 2. Во-вторых, он также представляет собой окно браузера и располагает методами для управления им. Например, здесь мы используем window как глобальный объект: function sayHi() { alert("Hello"); // глобальные функции доступны как методы глобального объекта: window.sayHi(); А здесь мы используем window как объект окна браузера, чтобы узнать его высоту: alert(window.innerHeight); // внутренняя высота окна браузера Существует гораздо больше свойств и методов для управления окном браузера. Мы рассмотрим их позднее. DOM (Document Object Model) Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять. Объект document – основная «входная точка». С его помощью мы можем чтото создавать или менять на странице. Например: // заменим цвет фона на красный, document.body.style.background = "red"; // а через секунду вернём как было setTimeout(() => document.body.style.background = "", 1000); Мы использовали в примере только document.body.style , но на самом деле возможности по управлению страницей намного шире. Различные свойства и методы описаны в спецификации: DOM Living Standard на   DOM – не только для браузеров Спецификация DOM описывает структуру документа и предоставляет объекты для манипуляций со страницей. Существует и другие, отличные от браузеров, инструменты, использующие DOM. Например, серверные скрипты, которые загружают и обрабатывают HTMLстраницы, также могут использовать DOM. При этом они могут поддерживать спецификацию не полностью.  CSSOM для стилей Правила стилей CSS структурированы иначе чем HTML. Для них есть отдельная спецификация CSSOM  , которая объясняет, как стили должны представляться в виде объектов, как их читать и писать. CSSOM используется вместе с DOM при изменении стилей документа. В реальности CSSOM требуется редко, обычно правила CSS статичны. Мы редко добавляем/удаляем стили из JavaScript, но и это возможно. BOM (Browser Object Model) Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером (окружением), чтобы работать со всем, кроме документа. Например: Объект navigator  даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются: navigator.userAgent – информация о текущем браузере, и navigator.platform – информация о платформе (может помочь в понимании того, в какой ОС открыт браузер – Windows/Linux/Mac и так далее). Объект location  позволяет получить текущий URL и перенаправить браузер по новому адресу. Вот как мы можем использовать объект location : alert(location.href); // показывает текущий URL if (confirm("Перейти на Wikipedia?")) { location.href = " // перенаправляет браузер на другой URL Функции alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем.  Спецификации BOM является частью общей спецификации HTML  . Да, вы всё верно услышали. Спецификация HTML по адресу  не только про «язык HTML» (теги, атрибуты), она также покрывает целое множество объектов, методов и специфичных для каждого браузера расширений DOM. Это всё «HTML в широком смысле». Для некоторых вещей есть отдельные спецификации, перечисленные на  . Итого Говоря о стандартах, у нас есть: Cпецификация DOM описывает структуру документа, манипуляции с контентом и события, подробнее на  . Cпецификация CSSOM Описывает файлы стилей, правила написания стилей и манипуляций с ними, а также то, как это всё связано со страницей, подробнее на https://  . Cпецификация HTML Описывает язык HTML (например, теги) и BOM (объектную модель браузера) – разные функции браузера: setTimeout , alert , location и так далее, подробнее на  . Тут берётся за основу спецификация DOM и расширяется дополнительными свойствами и методами. Кроме того, некоторые классы описаны отдельно на  . Пожалуйста, заметьте для себя эти ссылки, так как по ним содержится очень много информации, которую невозможно изучить полностью и держать в уме. Когда вам нужно будет прочитать о каком-то свойстве или методе, справочник на сайте Mozilla  тоже очень хороший ресурс, хотя ничто не сравнится с чтением спецификации: она сложная и объёмная, но сделает ваши знания максимально полными. Для поиска чего-либо обычно удобно использовать интернет-поиск со словами «WHATWG [термин]» или «MDN [термин]», например q=whatwg+localstorage  ,  . А теперь давайте перейдём к изучению DOM, так как страница – это основа всего. DOM-дерево Основой HTML-документа являются теги. В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом. Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы. Например, document.body – объект для тега . Если запустить этот код, то станет красным на 3 секунды: document.body.style.background = 'red'; // сделать фон красным setTimeout(() => document.body.style.background = '', 3000); // вернуть назад Это был лишь небольшой пример того, что может DOM. Скоро мы изучим много способов работать с DOM, но сначала нужно познакомиться с его структурой. Пример DOM Начнём с такого, простого, документа: О лосях Правда о лосях. DOM – это представление HTML-документа в виде дерева тегов. Вот как оно выглядит: ▾ HTML ▾ HEAD #text ↵␣␣␣␣ ▾ TITLE #text О лосях #text ↵␣␣ #text ↵␣␣ ▾ BODY #text Правда о лосях. Каждый узел этого дерева – это объект. Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: – это корневой узел, и его дочерние узлы и т.д. Текст внутри элементов образует текстовые узлы, обозначенные как #text . Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне. Например, в теге есть текстовый узел "О лосях" . Обратите внимание на специальные символы в текстовых узлах: перевод строки: ↵ (в JavaScript он обозначается как \n ) пробел: ␣ Пробелы и переводы строки – это полноправные символы, как буквы и цифры. Они образуют текстовые узлы и становятся частью дерева DOM. Так, в примере выше в теге <head> есть несколько пробелов перед <title> , которые образуют текстовый узел #text (он содержит в себе только перенос строки и несколько пробелов). Существует всего два исключения из этого правила: 1. По историческим причинам пробелы и перевод строки перед тегом <head> игнорируются 2. Если мы записываем что-либо после закрывающего тега </body> , браузер автоматически перемещает эту запись в конец body , поскольку спецификация HTML требует, чтобы всё содержимое было внутри <body> . Поэтому после закрывающего тега </body> не может быть никаких пробелов. В остальных случаях всё просто – если в документе есть пробелы (или любые другие символы), они становятся текстовыми узлами дерева DOM, и если мы их удалим, то в DOM их тоже не будет. Здесь пробельных текстовых узлов нет: <!DOCTYPE HTML> <html><head><title>О лосяхПравда о лосях. ▾ HTML ▾ HEAD ▾ TITLE #text О лосях ▾ BODY #text Правда о лосях.  Пробелы по краям строк и пробельные текстовые узлы скрыты в инструментах разработки Когда мы работаем с деревом DOM, используя инструменты разработчика в браузере (которые мы рассмотрим позже), пробелы в начале/конце текста и пустые текстовые узлы (переносы строк) между тегами обычно не отображаются. Таким образом инструменты разработки экономят место на экране. В дальнейших иллюстрациях DOM мы также будем для краткости пропускать пробельные текстовые узлы там, где они не имеют значения. Обычно они не влияют на то, как отображается документ. Автоисправление Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM. Например, в начале документа всегда должен быть тег . Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега . Например, если HTML-файл состоит из единственного слова "Привет" , браузер обернёт его в теги и , добавит необходимый тег , и DOM будет выглядеть так: