Front-end pro

Document
■ Так как современный JS используется не только в web разработке появилось
понятие окружения – согласно спецификации это функциональность которую
предоставляет среда в которой JS используется
■ В браузерном окружении самым корневым является объект window. У него две
роли – глобальный объект для JS кода и предоставляет собой окно браузера и
располагает методами для управления им

3.

DOM – Document Object Model
■ Объектная модель документа представляет все содержимое страницы в виде
объектов которые можно менять
■ Объект document - основная входная точка с его помощью мы можем что-то
создавать или менять на странице
■ DOM – не только для браузеров. Существуют и другие отличные от браузеров
инструменты использующие DOM – серверные скрипты которые загружают и
обрабатывают HTML-страницы. При этом они могут поддерживать спецификацию
не полностью

4.

BOM - Browser Object Model
■ Это дополнительные объекты предоставляемые браузером(окружением) чтобы
работать со всеми кроме документа
■ Примеры: navigator – дает информацию о самом браузере и операционной
системе, location – позволяет получить текущий URL и перенаправить браузер
по другому адресу
■ Функции alert/confirm/prompt тоже являются частью BOM но они не
относятся непосредственно к странице а предоставляют собой методы объекта
окна браузера для коммуникации с пользователем

5.

DOM - дерево
■ Основой HTML-документа являются теги
■ В соответствии с объектной моделью документа(DOM) каждый HTML-тег является
объектом. Вложенные теги являются детьми родительского элемента. Текст,
который находится внутри тега также является объектом
■ Все эти объекты доступны при помощи JS мы можем использовать для
изменения страницы
■ Пробелы и переносы строки это полноправные символы как буквы и цифры.
Исключения: перевод строки перед тегом <head>, после закрывающего body
потому что все должно быть внутри body

6.

Автоисправление
■ Если браузер сталкивается с некорректно написанным HTML-кодом он
автоматически корректирует его при построении DOM. Например если в начале
документа нет тега html то браузер его создаст
■ При генерации DOM браузер самостоятельно обрабатывает ошибки в документе,
закрывает теги и т.д.

7.

Инструменты разработчика
■ Нажав правой клавишей мыши и “Проинспектировав” элемент либо нажав f12
можно увидеть DOM дерево и множество подробной информации об узлах.
■ Styles - CSS стили примененные к текущему элементу, включая встроенные
■ Computed – итоговые CSS-свойства элемента которые применены к элементу в
итоге учитывая правила CSS
■ Event Listeners – в этом разделе мы видим обработчики событий
привязанные к DOM-элементам

8.

Навигация по DOM элементам
■ Самые верхние элементы дерева доступны как свойства объекта document:
html - document.documentElement
body – document.body
head – document.head
■ Дочерние узлы(дети) – элементы которые являются непосредственным детьми
узла
■ Потомки – все элементы которые лежат внутри данного включая детей и их детей
■ свойство узла childNotes – коллекция которая содержит список всех детей
включая текстовые узлы

9.

Навигация по DOM элементам
■ firstChild, lastChild – быстрый доступ к соответствующим дочерним
элементам
■ hasChildNodes() – для проверки наличия дочерних узлов
■ DOM-коллекции – только для чтения, заменить узел по индексу мы не можем
■ parentNode – доступ к родительскому элементу
■ nextSibling – следующий узел того же родителя
■ previousSibling – предыдущий узел того же родителя

10.

Навигация только по элементам
■ Навигационные свойства описанные прежде относятся ко всем узлам в
документе. Например в childNotes находятся и текстовые узлы и узлыэлементы и узлы-комментарии
■ Для того чтоб обратится только к элементам есть следующие свойства
■ children – коллекция детей которые являются элементами
■ firstElementChild, lastElementChild – первый и последний дочерние
элементы
■ previousElementSibling, nextElementSibling – соседи-элементы
■ parentElement – родитель-элемент

11.

Поиск
■ Для произвольного поиска по странице без учета родителей детей и соседей
используется document.getElementById. Поиск тут ведется по html
аттрибуту.
Метод вернет либо элемент либо null
■ elem.querySelectorAll(css) - возвращает все элементы внутри elem
удовлетворяющие переданному CSS-селектору или пустой список узлов(не
массив)
■ elem.querySelector(css) – возвращает первый элемент
соответствующий данному CSS-селектору
■ elem.matches(css) - проверяет удовлетворяет ли elem СSS-селектору
вернет true или false

12.

Поиск
■ elem.closest(css) – ищет ближайшего предка который соответствует CSSселектору либо null
■ getElementsBy* - объединяет множество методов типа
getElementsByTagName, getElementsByClassName вернет также
коллекцию а не массив
■ Возвращаемые коллекции “живые” – всегда отражают текущее состояние
документа и автоматически обновляются при его изменении

13.

Свойства узлов: тег и содержимое
■ У DOM-узлов бывают разные свойства – у <a> есть свойства связанные со
ссылками у <input> - связанные с полем ввода
■ Каждый DOM-узел принадлежит соответствующему встроенному классу
■ Корнем иерархии является EventTarget от него наследуется Node и
остальные DOM-узлы
■ EventTarget – корневой абстрактный класс
■ Node – также абстрактен и служит основой для DOM-узлов. Предоставляет такой
базовый функционал как – parentNode, nextSibling, childNotes

14.

Классы DOM-узлов
■ Document – наследуется от HTMLDocument – это документ в целом
■ CharacterData – абстрактный класс который наследуется: Text(текст внутри
элемента), Comment(класс для комментариев)
■ Element – базовый класс для DOM-элементов. Обеспечивает навигацию на
уровне элементов: getElementsByTagName, querySelector. Так как
браузер поддерживает не только HTML но и XML и SVG Element является основой
для специфичных классов SVGElement, XmlElement.
■ HTMLElement – базовый класс для всех остальных HTMLэлементов(HTMLInputElement, HTMLBodyElement, HTMLAnchorElement)

15.

Классы элементов
■ Также есть элементы которые не имеют определенных свойств(<span>,
<section>, <article>) они являются экземплярами класса HTMLElement
■ Узнать какой класс наследует элемент можно с помощью instanceOf
■ Как видим DOM-узлы это JS объекты для наследования которых используются
классы основанные на прототипах
■ Для отладки можно использовать console.log – выведет элемент в форме
DOM-дерева и console.dir – выводит элемент в видел DOM-объекта

16.

Свойства узлов
■ Свойства nodeType – старый способ узнать тип DOM-узла, возвращает число
которое можно сравнить с числом которое характеризует скажем текстовый узел.
Новый способов – instanceOf
■ nodeName, tagName – узнать имя тега. Работают схоже но имеют различия.
tagName- есть только у элементов Element(например у комментария и текста
нет), nodeName – у любых узлов Node
■ innerHTML – позволяет получить HTML-содержимое элемента в виде строки. Мы
также можем изменяет его. Получается что работает как свойство-аксессор.
Присвоение с добавлением(+=) полностью перезапишет innerHTML.

17.

Свойства узлов
■ outerHTML – содержит HTML элемента целиком. Получается innerHTML + сам
элемент. В отличии от innerHTML запись в outerHTML не изменяет элемент а
элемент заменяется целиком
■ nodeValue/data – содержимое текстового узла, является аналогом
innerHTML для текстовых узлов
■ textContent – предоставляет доступ к тексту внутри элемента исключая все
теги. В innerHTML текст отображался бы вместе с HTML-тегами
■ hidden – атрибут и DOM-свойство которое указывает видим мы элемент ли нет.
Технически работает как display=“none”

English Русский Правила