BOM (Browser Object Model)
Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером (окружением), чтобы работать со всем, кроме документа.
Например:
- Объект navigator даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются:
- Объект location позволяет получить текущий URL и перенаправить браузер по новому адресу.
Пример как мы можем использовать объект
Функции
#браузер #документ
Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером (окружением), чтобы работать со всем, кроме документа.
Например:
- Объект navigator даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются:
navigator.userAgent – информация о текущем браузере, и navigator.platform – информация о платформе (может помочь в понимании того, в какой ОС открыт браузер – Windows/Linux/Mac и так далее).- Объект location позволяет получить текущий URL и перенаправить браузер по новому адресу.
Пример как мы можем использовать объект
location показан на рисунке.Функции
alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем.#браузер #документ
👍7🔥3
Пример DOM
DOM – это представление HTML-документа в виде дерева тегов.
На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов.
Каждый узел этого дерева – это объект.
Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева:
Текст внутри элементов образует текстовые узлы, обозначенные как
Например, в теге
Обратите внимание на специальные символы в текстовых узлах:
- перевод строки:
- пробел:
#браузер #документ #dom
DOM – это представление HTML-документа в виде дерева тегов.
На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов.
Каждый узел этого дерева – это объект.
Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева:
<html> – это корневой узел, <head> и <body> его дочерние узлы и т.д.Текст внутри элементов образует текстовые узлы, обозначенные как
#text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне.Например, в теге
<title> есть текстовый узел "О лосях".Обратите внимание на специальные символы в текстовых узлах:
- перевод строки:
↵ (в JavaScript он обозначается как \n)- пробел:
␣#браузер #документ #dom
👍8❤2
Автоисправление
Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
Например, в начале документа всегда должен быть тег
Например, если HTML-файл состоит из единственного слова
При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
В примере единственный тег
#браузер #документ #dom
Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
Например, в начале документа всегда должен быть тег
<html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>.Например, если HTML-файл состоит из единственного слова
"Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег <head>.При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
В примере единственный тег
<p> не закрыт, однако DOM будет нормальным, потому что браузер сам закроет тег и восстановит отсутствующие детали.#браузер #документ #dom
👍8🔥1
Привет, дорогой подписчик!
Хотел бы ты видеть на канале заметки и обучающие материалы по HTML, CSS и Frontend-разработке в целом?
Хотел бы ты видеть на канале заметки и обучающие материалы по HTML, CSS и Frontend-разработке в целом?
Anonymous Poll
86%
Да
8%
Нет
6%
Без разницы
🔥11👍2
Другие типы узлов
Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.
Например, узел-комментарий, который вы можете увидеть на картинке выше.
Здесь мы видим узел нового типа – комментарий, обозначенный как
Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве.
Все, что есть в HTML, даже комментарии, является частью DOM.
Даже директива
Даже объект
Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них:
#браузер #документ #dom
Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.
Например, узел-комментарий, который вы можете увидеть на картинке выше.
Здесь мы видим узел нового типа – комментарий, обозначенный как
#comment, между двумя текстовыми узлами.Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве.
Все, что есть в HTML, даже комментарии, является частью DOM.
Даже директива
<!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед <html>. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует.Даже объект
document, представляющий весь документ, формально является DOM-узлом.Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них:
document, узлы-элементы, текстовые узлы, комментарии.#браузер #документ #dom
👍5🔥1
Поэкспериментируйте сами
Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.
Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.
Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.
Выглядит примерно так, как на картинке выше.
Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.
Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.
#браузер #документ #dom
Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.
Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.
Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.
Выглядит примерно так, как на картинке выше.
Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.
Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.
#браузер #документ #dom
👍8🔥2
Создание элемента
DOM-узел можно создать двумя методами:
Большую часть времени нам нужно создавать узлы элементов, такие как
#браузер #документ #изменение
DOM-узел можно создать двумя методами:
document.createElement(tag) - создаёт новый элемент с заданным тегом.document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом.Большую часть времени нам нужно создавать узлы элементов, такие как
div для сообщения.#браузер #документ #изменение
👍10🔥3
Основные свойства объекта event
#браузер #документ #события
event.type — тип события, в данном случае "click".event.currentTarget — элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget.event.clientX / event.clientY — координаты курсора в момент клика относительно окна, для событий мыши.#браузер #документ #события
👍8🔥4
Объект события доступен и в HTML
При назначении обработчика в HTML, тоже можно использовать объект
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так:
То есть, её первый аргумент называется
#браузер #документ #события
При назначении обработчика в HTML, тоже можно использовать объект
event.Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так:
function(event) { alert(event.type) }. То есть, её первый аргумент называется
"event", а тело взято из атрибута.#браузер #документ #события
👍5🔥3
Можно использовать класс для обработки событий
Как видим, если
Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через
#браузер #документ #события
Как видим, если
addEventListener получает класс в качестве обработчика, он вызывает menu.handleEvent(event), когда происходит событие.Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через
addEventListener. Тогда объект menu будет получать события mousedown и mouseup, но не другие (не назначенные) типы событий.#браузер #документ #события
👍5🔥4
Декомпозиция процесса обработки событий
Метод
Теперь обработка событий разделена по методам, что упрощает поддержку кода.
#браузер #документ #события
Метод
handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий (см. пример на картинке).Теперь обработка событий разделена по методам, что упрощает поддержку кода.
#браузер #документ #события
👍12🔥3
textContent: просто текст
Свойство
Как мы видим, возвращается только текст, как если бы все
На практике редко появляется необходимость читать текст таким образом.
Намного полезнее возможность записывать текст в
#браузер #документ #свойства_узлов
Свойство
textContent предоставляет доступ к тексту внутри элемента за вычетом всех <тегов> (см. пример на картинке выше).Как мы видим, возвращается только текст, как если бы все
<теги> были вырезаны, но текст в них остался.На практике редко появляется необходимость читать текст таким образом.
Намного полезнее возможность записывать текст в
textContent, т.к. позволяет писать текст «безопасным способом».#браузер #документ #свойства_узлов
👍6🔥4
Запись в textContent (безопасный способ)
Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С
- С
Сравним два тега div (см. пример выше на картинке).
- В первый
- Во второй
В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через
#браузер #документ #свойства_узлов
Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.
- С
innerHTML вставка происходит «как HTML», со всеми HTML-тегами.- С
textContent вставка получается «как текст», все символы трактуются буквально.Сравним два тега div (см. пример выше на картинке).
- В первый
<div> имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.- Во второй
<div> имя приходит «как текст», поэтому мы видим <b>Винни-пух!</b>.В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через
textContent – один из способов от этого защититься.#браузер #документ #свойства_узлов
👍6🔥1
Другие свойства
У DOM-элементов есть дополнительные свойства, в частности, зависящие от класса:
-
-
-
- …и многие другие…
Большинство стандартных HTML-атрибутов имеют соответствующее DOM-свойство, и мы можем получить к нему доступ.
Если мы хотим узнать полный список поддерживаемых свойств для данного класса, можно найти их в спецификации. Например, класс
Если же нам нужно быстро что-либо узнать или нас интересует специфика определённого браузера – мы всегда можем вывести элемент в консоль, используя
#браузер #документ #свойства_узлов
У DOM-элементов есть дополнительные свойства, в частности, зависящие от класса:
-
value – значение для <input>, <select> и <textarea> (HTMLInputElement, HTMLSelectElement…).-
href – адрес ссылки «href» для <a href="..."> (HTMLAnchorElement).-
id – значение атрибута «id» для всех элементов (HTMLElement).- …и многие другие…
Большинство стандартных HTML-атрибутов имеют соответствующее DOM-свойство, и мы можем получить к нему доступ.
Если мы хотим узнать полный список поддерживаемых свойств для данного класса, можно найти их в спецификации. Например, класс
HTMLInputElement описывается здесь: https://html.spec.whatwg.org/#htmlinputelement.Если же нам нужно быстро что-либо узнать или нас интересует специфика определённого браузера – мы всегда можем вывести элемент в консоль, используя
console.dir(elem), и прочитать все свойства. Или исследовать «свойства DOM» во вкладке Elements браузерных инструментов разработчика.#браузер #документ #свойства_узлов
👍4🔥2
Атрибуты и свойства
Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега
#браузер #документ #атрибуты_свойств
Когда браузер загружает страницу, он «парсит» HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега
<body id="page"> у DOM-объекта будет такое свойство body.id="page".#браузер #документ #атрибуты_свойств
👍6🔥1
DOM-свойства
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать
#браузер #документ #атрибуты_свойств
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать
elem.nodeType, не elem.NoDeTyPe).#браузер #документ #атрибуты_свойств
👍9🔥2
HTML-атрибуты
В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.
Таким образом, когда у элемента есть
если атрибут нестандартный.
#браузер #документ #атрибуты_свойств
В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.
Таким образом, когда у элемента есть
id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.
#браузер #документ #атрибуты_свойств
👍9🔥1
Прекрати мечтать и стань мидлом за 50 дней
Опытные Frontend-разработчики создали бесплатный канал, в котором регулярно выходят топовые видеоуроки и курсы для начинающих.
Хватит тратить время на поиск годного контента, просто подпишись на Войти в IT, остальное мы сделаем за тебя.
Опытные Frontend-разработчики создали бесплатный канал, в котором регулярно выходят топовые видеоуроки и курсы для начинающих.
Хватит тратить время на поиск годного контента, просто подпишись на Войти в IT, остальное мы сделаем за тебя.
🔥3👍1
Расширенная демонстрация работы с атрибутами
Пожалуйста, обратите внимание:
1.
2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение
3. Все атрибуты, в том числе те, которые мы установили, видны в
4. Коллекция
#браузер #документ #атрибуты_свойств
Пожалуйста, обратите внимание:
1.
getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение
"123".3. Все атрибуты, в том числе те, которые мы установили, видны в
outerHTML.4. Коллекция
attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value.#браузер #документ #атрибуты_свойств
👍15🔥1