Сверху: 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
closest
Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.
Метод
Другими словами, метод
#браузер #документ #поиск
Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.
Метод
elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.Другими словами, метод
closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null, если такой элемент не найден.#браузер #документ #поиск
👍14🔥6
getElementsBy*
Существуют также другие методы поиска элементов по тегу, классу и так далее.
На данный момент, они скорее исторические, так как querySelector более чем эффективен.
Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.
elem.getElementsByTagName(tag) - ищет элементы с данным тегом и возвращает их коллекцию. Передав
elem.getElementsByClassName(className) - возвращает элементы, которые имеют данный CSS-класс.
document.getElementsByName(name) - возвращает элементы с заданным атрибутом
P.S. На картинке пример поиска всех
#браузер #документ #поиск
Существуют также другие методы поиска элементов по тегу, классу и так далее.
На данный момент, они скорее исторические, так как querySelector более чем эффективен.
Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.
elem.getElementsByTagName(tag) - ищет элементы с данным тегом и возвращает их коллекцию. Передав
"*" вместо тега, можно получить всех потомков.elem.getElementsByClassName(className) - возвращает элементы, которые имеют данный CSS-класс.
document.getElementsByName(name) - возвращает элементы с заданным атрибутом
name. Очень редко используется.P.S. На картинке пример поиска всех
input в таблице.#браузер #документ #поиск
👍10🔥3
Живые коллекции
Все методы
В приведённом выше примере есть два скрипта.
- Первый создаёт ссылку на коллекцию
- Второй скрипт запускается после того, как браузер встречает ещё один
#браузер #документ #поиск
Все методы
"getElementsBy*" возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.В приведённом выше примере есть два скрипта.
- Первый создаёт ссылку на коллекцию
<div>. На этот момент её длина равна 1.- Второй скрипт запускается после того, как браузер встречает ещё один
<div>, теперь её длина – 2.#браузер #документ #поиск
👍13🔥10
Статические коллекции
querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.
Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную
Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового
#браузер #документ #поиск
querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.
Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную
1.Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового
div в документе, в отличие от живой коллекции.#браузер #документ #поиск
👍6🔥5❤3
Итого по поиску в DOM
Есть 6 основных методов поиска элементов в DOM (см. изображение выше).
Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll, но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.
Кроме того:
- Есть метод elem.matches(css), который проверяет, удовлетворяет ли элемент CSS-селектору.
- Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.
И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:
- elemA.contains(elemB) вернёт
#браузер #документ #поиск
Есть 6 основных методов поиска элементов в DOM (см. изображение выше).
Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll, но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.
Кроме того:
- Есть метод elem.matches(css), который проверяет, удовлетворяет ли элемент CSS-селектору.
- Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.
И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:
- elemA.contains(elemB) вернёт
true, если elemB находится внутри elemA (elemB потомок elemA) или когда elemA==elemB.#браузер #документ #поиск
👍13🔥4❤2
Классы DOM-узлов
У разных DOM-узлов могут быть разные свойства. Например, у узла, соответствующего тегу
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке выше изображены основные классы.
#браузер #документ #свойства_узлов
У разных DOM-узлов могут быть разные свойства. Например, у узла, соответствующего тегу
<a>, есть свойства, связанные со ссылками, а у соответствующего тегу <input> – свойства, связанные с полем ввода и т.д. Текстовые узлы отличаются от узлов-элементов. Но у них есть общие свойства и методы, потому что все классы DOM-узлов образуют единую иерархию.Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке выше изображены основные классы.
#браузер #документ #свойства_узлов
👍8❤2🔥2