Пример DOM
DOM – это представление HTML-документа в виде дерева тегов.
На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов.
Каждый узел этого дерева – это объект.
Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева:
Текст внутри элементов образует текстовые узлы, обозначенные как
Например, в теге
Обратите внимание на специальные символы в текстовых узлах:
- перевод строки:
- пробел:
#браузер #документ #dom
DOM – это представление HTML-документа в виде дерева тегов.
На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов.
Каждый узел этого дерева – это объект.
Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева:
<html> – это корневой узел, <head> и <body> его дочерние узлы и т.д.Текст внутри элементов образует текстовые узлы, обозначенные как
#text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне.Например, в теге
<title> есть текстовый узел "О лосях".Обратите внимание на специальные символы в текстовых узлах:
- перевод строки:
↵ (в JavaScript он обозначается как \n)- пробел:
␣#браузер #документ #dom
🔥12👍6❤2
Автоисправление
Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
Например, в начале документа всегда должен быть тег
Например, если HTML-файл состоит из единственного слова
При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
В примере единственный тег
#браузер #документ #dom
Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
Например, в начале документа всегда должен быть тег
<html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>.Например, если HTML-файл состоит из единственного слова
"Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег <head>.При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
В примере единственный тег
<p> не закрыт, однако DOM будет нормальным, потому что браузер сам закроет тег и восстановит отсутствующие детали.#браузер #документ #dom
👍14🔥6
Другие типы узлов
Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.
Например, узел-комментарий, который вы можете увидеть на картинке выше.
Здесь мы видим узел нового типа – комментарий, обозначенный как
Казалось бы – зачем комментарий в 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
👍12🔥3
Поэкспериментируйте сами
Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.
Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.
Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.
Выглядит примерно так, как на картинке выше.
Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.
Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.
#браузер #документ #dom
Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.
Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.
Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.
Выглядит примерно так, как на картинке выше.
Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.
Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.
#браузер #документ #dom
👍6🔥2❤1
Взаимодействие с консолью
При работе с DOM нам часто требуется применить к нему JavaScript. Например: получить узел и запустить какой-нибудь код для его изменения, чтобы посмотреть результат. Вот несколько подсказок, как перемещаться между вкладками Elements и Console.
Для начала:
1. На вкладке Elements выберите первый элемент
2. Нажмите Esc – прямо под вкладкой Elements откроется Console.
Последний элемент, выбранный во вкладке Elements, доступен в консоли как
Теперь мы можем запускать на них команды. Например
#браузер #документ #dom
При работе с DOM нам часто требуется применить к нему JavaScript. Например: получить узел и запустить какой-нибудь код для его изменения, чтобы посмотреть результат. Вот несколько подсказок, как перемещаться между вкладками Elements и Console.
Для начала:
1. На вкладке Elements выберите первый элемент
<li>.2. Нажмите Esc – прямо под вкладкой Elements откроется Console.
Последний элемент, выбранный во вкладке Elements, доступен в консоли как
$0; предыдущий, выбранный до него, как $1 и т.д.Теперь мы можем запускать на них команды. Например
$0.style.background = 'red' сделает выбранный элемент красным, как на картинке выше.#браузер #документ #dom
👍16🔥4
Навигация по DOM-элементам
DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект.
Все операции с DOM начинаются с объекта
Так выглядят основные ссылки, по которым можно переходить между узлами DOM (см. картинку выше).
#браузер #документ #dom_навигация
DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект.
Все операции с DOM начинаются с объекта
document. Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу.Так выглядят основные ссылки, по которым можно переходить между узлами DOM (см. картинку выше).
#браузер #документ #dom_навигация
👍7🔥2
Сверху: documentElement и body
Самые верхние элементы дерева доступны как свойства объекта
Самый верхний узел документа:
Другой часто используемый DOM-узел – узел тега
Тег
Есть одна тонкость:
Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.
В частности, если скрипт находится в
Поэтому, в примере выше первый
#браузер #документ #dom_навигация
Самые верхние элементы дерева доступны как свойства объекта
document:<html> = document.documentElementСамый верхний узел документа:
document.documentElement. В DOM он соответствует тегу <html>.<body> = document.bodyДругой часто используемый DOM-узел – узел тега
<body>: document.body.<head> = document.headТег
<head> доступен как document.head.Есть одна тонкость:
document.body может быть равен nullНельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.
В частности, если скрипт находится в
<head>, document.body в нём недоступен, потому что браузер его ещё не прочитал.Поэтому, в примере выше первый
alert выведет null.#браузер #документ #dom_навигация
👍12🔥3❤1
Дочерние узлы и потомки
Здесь и далее мы будем использовать два принципиально разных термина:
- Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например,
- Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.
В примере выше детьми тега
А потомки
#браузер #документ #dom_навигация
Здесь и далее мы будем использовать два принципиально разных термина:
- Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например,
<head> и <body> являются детьми элемента <html>.- Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.
В примере выше детьми тега
<body> являются теги <div> и <ul> (и несколько пустых текстовых узлов).А потомки
<body>– это и прямые дети <div>, <ul> и вложенные в них: <li> (потомок <ul>) и <b> (потомок <li>) – в общем, все элементы поддерева.#браузер #документ #dom_навигация
👍9🔥6❤1
childNodes, firstChild, lastChild
Пример выше последовательно выведет детей
Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент
Свойства
Они, по сути, являются всего лишь сокращениями. Если у тега есть дочерние узлы, условие ниже всегда верно:
Для проверки наличия дочерних узлов существует также специальная функция
#браузер #документ #dom_навигация
childNodes содержит список всех детей, включая текстовые узлы.Пример выше последовательно выведет детей
document.body.Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент
<script>. На самом деле, в документе есть ещё «какой-то HTML-код», но на момент выполнения скрипта браузер ещё до него не дошёл, поэтому скрипт не видит его.Свойства
firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему элементу.Они, по сути, являются всего лишь сокращениями. Если у тега есть дочерние узлы, условие ниже всегда верно:
elem.childNodes[0] === elem.firstChildelem.childNodes[elem.childNodes.length - 1] === elem.lastChildДля проверки наличия дочерних узлов существует также специальная функция
elem.hasChildNodes().#браузер #документ #dom_навигация
👍9🔥5❤2
DOM-коллекции
Как мы уже видели,
И есть два важных следствия из этого:
1. Для перебора коллекции мы можем использовать
Это работает, потому что коллекция является перебираемым объектом (есть требуемый для этого метод
2. Методы массивов не будут работать, потому что коллекция – это не массив (2 пример).
Первый пункт – это хорошо для нас. Второй – бывает неудобен, но можно пережить. Если нам хочется использовать именно методы массива, то мы можем создать настоящий массив из коллекции, используя
#браузер #документ #dom_навигация
Как мы уже видели,
childNodes похож на массив. На самом деле это не массив, а коллекция – особый перебираемый объект-псевдомассив.И есть два важных следствия из этого:
1. Для перебора коллекции мы можем использовать
for..of (1 пример).Это работает, потому что коллекция является перебираемым объектом (есть требуемый для этого метод
Symbol.iterator).2. Методы массивов не будут работать, потому что коллекция – это не массив (2 пример).
Первый пункт – это хорошо для нас. Второй – бывает неудобен, но можно пережить. Если нам хочется использовать именно методы массива, то мы можем создать настоящий массив из коллекции, используя
Array.from (3 пример).#браузер #документ #dom_навигация
👍11❤4🔥4
Соседи и родитель
Соседи – это узлы, у которых один и тот же родитель.
Следующий сосед – в свойстве
Родитель доступен через
P.S. Примеры показаны на картинке выше.
#браузер #документ #dom_навигация
Соседи – это узлы, у которых один и тот же родитель.
Следующий сосед – в свойстве
nextSibling, а предыдущий – в previousSibling.Родитель доступен через
parentNode.P.S. Примеры показаны на картинке выше.
#браузер #документ #dom_навигация
👍12🔥3❤1
Навигация только по элементам
Навигационные свойства, описанные выше, относятся ко всем узлам в документе. В частности, в
Но для большинства задач текстовые узлы и узлы-комментарии нам не нужны. Мы хотим манипулировать узлами-элементами, которые представляют собой теги и формируют структуру страницы.
Поэтому давайте рассмотрим дополнительный набор ссылок, которые учитывают только узлы-элементы.
Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово
-
-
-
-
#браузер #документ #dom_навигация
Навигационные свойства, описанные выше, относятся ко всем узлам в документе. В частности, в
childNodes находятся и текстовые узлы и узлы-элементы и узлы-комментарии, если они есть.Но для большинства задач текстовые узлы и узлы-комментарии нам не нужны. Мы хотим манипулировать узлами-элементами, которые представляют собой теги и формируют структуру страницы.
Поэтому давайте рассмотрим дополнительный набор ссылок, которые учитывают только узлы-элементы.
Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово
Element:-
children – коллекция детей, которые являются элементами.-
firstElementChild, lastElementChild – первый и последний дочерний элемент.-
previousElementSibling, nextElementSibling – соседи-элементы.-
parentElement – родитель-элемент.#браузер #документ #dom_навигация
👍9🔥4❤1
Ещё немного ссылок: таблицы
До сих пор мы описывали основные навигационные ссылки.
Некоторые типы DOM-элементов предоставляют для удобства дополнительные свойства, специфичные для их типа.
Таблицы – отличный пример таких элементов.
Элемент
-
-
-
-
-
-
-
-
P.S. Пример выше на картинке.
#браузер #документ #dom_навигация
До сих пор мы описывали основные навигационные ссылки.
Некоторые типы DOM-элементов предоставляют для удобства дополнительные свойства, специфичные для их типа.
Таблицы – отличный пример таких элементов.
Элемент
<table>, в дополнение к свойствам, о которых речь шла выше, поддерживает следующие:-
table.rows – коллекция строк <tr> таблицы.-
table.caption/tHead/tFoot – ссылки на элементы таблицы <caption>, <thead>, <tfoot>.-
table.tBodies – коллекция элементов таблицы <tbody> (по спецификации их может быть больше одного).<thead>, <tfoot>, <tbody> предоставляют свойство rows:-
tbody.rows – коллекция строк <tr> секции.<tr>:-
tr.cells – коллекция <td> и <th> ячеек, находящихся внутри строки <tr>.-
tr.sectionRowIndex – номер строки <tr> в текущей секции <thead>/<tbody>/<tfoot>.-
tr.rowIndex – номер строки <tr> в таблице (включая все строки таблицы).<td> and <th>:-
td.cellIndex – номер ячейки в строке <tr>.P.S. Пример выше на картинке.
#браузер #документ #dom_навигация
👍14🔥3❤1
Итого по DOM навигации
Получив DOM-узел, мы можем перейти к его ближайшим соседям используя навигационные ссылки.
Есть два основных набора ссылок:
- Для всех узлов:
- Только для узлов-элементов:
Некоторые виды DOM-элементов, например таблицы, предоставляют дополнительные ссылки и коллекции для доступа к своему содержимому.
#браузер #документ #dom_навигация
Получив DOM-узел, мы можем перейти к его ближайшим соседям используя навигационные ссылки.
Есть два основных набора ссылок:
- Для всех узлов:
parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling.- Только для узлов-элементов:
parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling.Некоторые виды DOM-элементов, например таблицы, предоставляют дополнительные ссылки и коллекции для доступа к своему содержимому.
#браузер #документ #dom_навигация
👍9🔥2❤1
document.getElementById или просто id
Если у элемента есть атрибут
Значение
Если в документе есть несколько элементов с одинаковым значением
Метод
#браузер #документ #поиск
Если у элемента есть атрибут
id, то мы можем получить его вызовом document.getElementById(id), где бы он ни находился.Значение
id должно быть уникальным. В документе может быть только один элемент с данным id.Если в документе есть несколько элементов с одинаковым значением
id, то поведение методов поиска непредсказуемо. Браузер может вернуть любой из них случайным образом. Поэтому, пожалуйста, придерживайтесь правила сохранения уникальности id.Метод
getElementById можно вызвать только для объекта document. Он осуществляет поиск по id по всему документу.#браузер #документ #поиск
👍23🔥6❤1
querySelectorAll
Самый универсальный метод поиска – это
Запрос на картинке получает все элементы
Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.
#браузер #документ #поиск
Самый универсальный метод поиска – это
elem.querySelectorAll(css), он возвращает все элементы внутри elem, удовлетворяющие данному CSS-селектору.Запрос на картинке получает все элементы
<li>, которые являются последними потомками в <ul>.Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.
#браузер #документ #поиск
👍20🔥4❤2
querySelector
Метод
Иначе говоря, результат такой же, как при вызове
#браузер #документ #поиск
Метод
elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.Иначе говоря, результат такой же, как при вызове
elem.querySelectorAll(css)[0], но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.#браузер #документ #поиск
👍14🔥4❤1
Топовые инструменты для работы с JavaScript!
Канал JavaScript инструменты будет регулярно знакомить тебя с инструментами для:
- сборки
- тестирования
- отладки
- безопасности
- аналитики
- оптимизации кода
- документирования
Можно почитать, пока компилируется проект 😉
Канал JavaScript инструменты будет регулярно знакомить тебя с инструментами для:
- сборки
- тестирования
- отладки
- безопасности
- аналитики
- оптимизации кода
- документирования
Можно почитать, пока компилируется проект 😉
👍6🔥3❤1
matches
Предыдущие методы искали по DOM.
Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли
Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.
#браузер #документ #поиск
Предыдущие методы искали по DOM.
Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли
elem CSS-селектору, и возвращает true или false.Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.
#браузер #документ #поиск
🔥12👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачивай навыки JavaScript решая практические тесты!
На канале JavaScript тесты каждый день выходят викторины на знание особенностей языка.
Также у вас будет возможность обсудить любые вопросы в нашем чате с другими участниками и авторами контента.
Подойдёт начинающим и уже более уверенным JS разработчикам!
Можно пощёлкать, пока компилируется проект :)
Подпишись, чтобы не потерять 👇
#javascript #тесты
На канале JavaScript тесты каждый день выходят викторины на знание особенностей языка.
Также у вас будет возможность обсудить любые вопросы в нашем чате с другими участниками и авторами контента.
Подойдёт начинающим и уже более уверенным JS разработчикам!
Можно пощёлкать, пока компилируется проект :)
Подпишись, чтобы не потерять 👇
#javascript #тесты
👍7🔥2