Курс по JavaScript. Урок 16. Навигация по дереву DOM

Содержание материала:

Навигация по дереву DOM

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Выбранный набор элементов можно использовать в качестве отправной точки для перемещения к другим узлам DOM-дерева. При этом, по сути, один набор элементов используется для создания другого набора. Описанию и демонстрации применения методов jQuery, предназначенных для обхода структуры DOM, посвящены следующие разделы. В них рассматриваются различные типы отношений, которые могут существовать между содержащимися в документе элементами.

Каждый из описанных в последующих разделах методов возвращает объект jQuery. Этот объект может как содержать подходящие объекты, если таковые имеются, так и быть пустым в случае их отсутствия (свойство length таких объектов возвращает нулевое значение).

Перемещение вниз по дереву DOM

Процесс перемещения вниз по иерархической структуре DOM связан с выбором дочерних элементов (непосредственных потомков), а также всех остальных элементов, являющихся потомками элементов, содержащихся в объекте jQuery. Соответствующие методы jQuery и их краткое описание приведены в таблице ниже:

Методы, используемые для перемещения вниз по иерархической структуре DOM

Метод Описание
children() Выбирает дочерние элементы всех элементов, содержащихся в объекте jQuery
children(селектор) Выбирает все элементы, которые соответствуют указанному селектору и при этом являются непосредственными потомками элементов, содержащихся в объекте jQuery
contents() Возвращает дочерние элементы и текстовое содержимое всех элементов, содержащихся в объекте jQuery
find() Выбирает потомки элементов, содержащихся в объекте jQuery
find(селектор) Выбирает элементы, которые соответствуют указанному селектору и при этом являются потомками элементов, содержащихся в объекте jQuery
find(jQuery), find(HTMLElement),
find(HTMLElement[])
Выбирает пересечение множества непосредственных потомков элементов, содержащихся в объекте jQuery, и множества элементов, содержащихся в объекте аргумента

Метод children() выбирает лишь те элементы, которые являются непосредственными потомками (дочерними элементами) элементов, содержащихся в объекте jQuery, и может принимать селектор в качестве необязательного аргумента, обеспечивающего дополнительную фильтрацию элементов. Метод find() предназначен для выбора всех потомков, а не только дочерних элементов. Метод contents() наряду с дочерними элементами возвращает также текстовое содержимое.

Пример использования методов children() и find() приведен ниже:

В этом примере метод children() используется без селектора, тогда как метод find() используется с одним селектором. Подробная информация о выбранных элементах выводится на консоль вместе с указанием их количества:

Среди приятных особенностей методов children() и find() можно отметить отсутствие дублирования элементов в выбранном наборе. Это подтверждает пример, приведенный ниже:

В этом примере мы начинаем с того, что создаем объект jQuery, который содержит все элементы div с классом drow и все элементы div с классом dcell. Ключевым моментом здесь является то, что все элементы, принадлежащие классу dcell, одновременно являются элементами класса drow. Это означает, что мы имеем дело с двумя перекрывающимися множествами элементов-потомков, и в случае использования метода find() с селектором img это могло бы привести к дублированию элементов в результирующем наборе, поскольку элементы img являются потомками элементов div обоих классов. Однако jQuery выручает нас и самостоятельно заботится о том, чтобы среди возвращаемых элементов дублирование отсутствовало, что подтверждается результатами, выводимыми на консоль:

Перемещение вверх по дереву DOM

Перемещению вверх по DOM-дереву соответствует поиск родителей и предков элементов, содержащихся в объекте jQuery. Методы, используемые для таких перемещений, приведены в таблице ниже:

Методы, используемые для перемещения вверх по иерархической структуре DOM

Описание Метод
closest(селектор), closest(селектор, контекст) Выбор ближайшего предка, соответствующего указанному селектору, для каждого элемента, содержащегося в объекте jQuery
closest(jQuery), closest(HTMLElement) Выбор ближайшего предка для каждого элемента в объекте jQuery, совпадающего с одним из элементов, содержащихся в объекте аргумента
offsetParent() Нахождение ближайшего предка, значением CSS-свойства position которого является fixed, absolute или relative
parent(), parent(селектор) Выбор непосредственных предков для каждого элемента в объекте jQuery с возможностью их фильтрации с помощью селектора
parents(), parents(селектор) Выбор предков для каждого элемента в объекте jQuery с возможностью их фильтрации с помощью селектора
parentsUntil(селектор), parentsUntil(селектор, селектор) Выбор предков для каждого элемента в объекте jQuery до тех пор, пока не встретится элемент, соответствующий селектору. Результаты могут фильтроваться посредством второго селектора
parentsUntil(HTMLElement), parentsUntil(HTMLElement, селектор), parentsUntil(HTMLElement[]), parentsUntil(HTMLElement[], селектор) Выбирает предков для каждого элемента в объекте jQuery до тех пор, пока не встретится один из указанных элементов. Результаты могут фильтроваться посредством второго селектора

Выбор родительских элементов

Метод parent() позволяет выбрать родительский элемент для каждого из элементов, содержащихся в объекте jQuery. Если методу предоставляется селектор, то в результирующий набор будут включаться только те родительские элементы, которые соответствуют селектору. Пример использования метода parent() приведен ниже:

В этом сценарии сначала выбираются все элементы div, принадлежащие классу dcell, а затем вызывается метод parent(), выбирающий все родительские элементы. Здесь также демонстрируется использование метода parent() с селектором. Подробная информация о каждом выбранном родительском элементе выводится на консоль с использованием метода each:

Выбор предков

Метод parents() (обратите внимание на последнюю букву s в его названии) обеспечивает возможность выбора всех, а не только непосредственных предков (родителей) элементов, содержащихся в объекте jQuery. Как и в предыдущем случае, метод может принимать в качестве аргумента селектор для фильтрации результатов.

Пример использования метода parents() приведен ниже:

В этом примере метод parents() используется для выбора предков двух предварительно выбранных элементов img. Информация о каждом предке выводится на консоль:

Метод parentsUntil() является еще одной разновидностью методов, предназначенных для выбора предков элементов. Для каждого из элементов, содержащихся в объекте jQuery, метод parentsUntil() осуществляет перемещение вверх по иерархической структуре DOM, выбирая элементы-предки до тех пор, пока не встретится элемент, соответствующий селектору. Пример использования этого метода приведен ниже:

Топ-пост этого месяца:  Как и сколько можно заработать менеджером проектов в интернете

В этом примере процесс выбора предков для каждого элемента продолжается до тех пор, пока не встретится элемент form. На консоль выводится следующий результат:

Обратите внимание, что элементы, соответствующие селектору, исключаются из состава выбираемых предков. В данном случае это означает исключение элемента form. Набор предков можно подвергнуть дополнительной фильтрации, предоставив методу paraentsUntil() селектор в качестве второго аргумента, как показано в примере ниже:

В этом примере добавлен селектор, который фильтрует элементы, принадлежащие классу dcell. На консоль выводится следующий результат:

Выбор первого подходящего предка

Метод closest() позволяет выбирать первого из предков, соответствующих селектору, для каждого элемента в объекте jQuery. Пример использования этого метода приведен ниже:

В этом примере мы сначала выбираем элементы img в документе, а затем находим для каждого из них с помощью метода closest() ближайшего предка, который принадлежит классу drow.

Область выбора предков можно сузить, передав методу closest() объект HTMLElement() в качестве второго аргумента. Те предки, которые не являются контекстным объектом или его потомками, не включаются в выбранный набор. На консоль выводится следующий результат:

Методу closest() также можно передать в качестве аргумента объект jQuery, объект HTMLElement или массив объектов HTMLElement. В этом случае метод closest() будет продолжать процесс выбора предков для каждого из элементов, содержащихся в исходном объекте jQuery, до тех пор пока не встретится объект, переданный в качестве аргумента.

Метод offsetParent() представляет собой вариацию на тему метода closest() и предназначен для нахождения первого потомка, значение CSS-свойства position которого равно relative, absolute или fixed. Такие элементы называются , и их поиск может оказаться полезным при работе с анимацией. Пример использования этого метода приведен ниже:

В этой версии документа сначала с помощью CSS устанавливается значение свойства position элементов с атрибутом id равным row1 и row2. Далее в документе выбирается один из элементов img и с помощью метода offsetParent() находится ближайший позиционированный потомок выбранного элемента. После этого с помощью метода css() для свойства background-color выбранного элемента устанавливается значение lightgrey. Вид результирующей страницы в окне браузера представлен на рисунке:

Перемещение по дереву DOM в пределах одного иерархического уровня

Последняя разновидность перемещений по DOM-дереву, которую нам осталось рассмотреть, — это перемещение между узлами одного и того же уровня иерархии (между сестринскими узлами). Краткое описание предназначенных для этого методов jQuery приведено в таблице ниже:

Методы, используемые для перемещения между узлами DOM-дерева в пределах одного иерархического уровня

Метод Описание
next(), next(селектор) Выбирает сестринские элементы, непосредственно следующие за каждым из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора
nextAll(), nextAll(селектор) Выбирает все последующие сестринские элементы для каждого из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора
nextUntil(селектор), nextUntil(селектор, селектор), nextUntil(jQuery), nextUntil(jQuery, селектор), nextUntil(HTMLElement[]), nextUntil(HTMLElement[], селектор) Выбирает для каждого элемента последующие сестринские элементы вплоть до элемента (но не включая его), соответствующего селектору или содержащегося в объекте jQuery или массиве HTMLElement[]. Имеется дополнительная возможность фильтрации результатов с использованием селектора
prev(), prev(селектор) Выбирает сестринские элементы, непосредственно предшествующие каждому из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора
prevAll(), prevAll(селектор) Выбирает все предшествующие сестринские элементы для каждого из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора, передаваемого методу в качестве второго аргумента
prevUntil(селектор), prevUntil(селектор, селектор), prevUntil(jQuery), prevUntil(jQuery, селектор), prevUntil(HTMLElement[]), prevUntil(HTMLElement[], селектор) Выбирает для каждого элемента предшествующие сестринские элементы вплоть до элемента (но не включая его), соответствующего селектору или содержащегося в объекте jQuery или массиве HTMLElement[]. Имеется дополнительная возможность фильтрации результатов с использованием селектора, передаваемого методу в качестве второго аргумента
siblings(), siblings(селектор) Выбирает все сестринские элементы для каждого из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора

Выбор всех сестринских элементов

Метод siblings() обеспечивает возможность выбора всех сестринских элементов для всех элементов, содержащихся в объекте jQuery. Пример использования этого метода приведен ниже:

В этом примере мы сначала выбираем два элемента img, затем находим их родительские элементы с помощью метода parent(), после чего выбираем сестринские элементы последних с помощью метода siblings(). При этом выбираются как предшествующие, так и последующие сестринские элементы и для свойства border каждого из них устанавливается определенное значение с помощью метода css(). Вид результирующей страницы в окне браузера представлен на рисунке:

Обратите внимание: выбираются лишь сестринские элементы, но не сами элементы. Разумеется, эта ситуация изменится, если один из элементов, содержащихся в объекте jQuery, является сестринским по отношению к другому, как показано в примере ниже:

В этом сценарии мы начинаем с выбора всех элементов div, являющихся дочерними по отношению к элементу rowl, а затем вызываем метод siblings(). Каждый из элементов в выбранном наборе является сестринским в отношении по крайней мере одного из других элементов, как показано на рисунке:

Выбор последующих и предшествующих сестринских элементов

Я не собираюсь подробно останавливаться на каждом из методов, предназначенных для выбора предшествующих и последующих сестринских элементов, поскольку все они работают аналогично любому другому методу, обеспечивающему перемещение между узлами DOM-дерева. Пример использования методов nextAll() и prevAll() приведен ниже:

В этом сценарии для родительского элемента изображения астры выбираются все последующие сестринские элементы, а для родительского элемента изображения примулы — все предыдущие сестринские элементы. Результат работы сценария представлен на рисунке:

JavaScript HTML DOM Навигация

С помощью HTML DOM можно перемещаться по дереву узлов, используя связи узлов.

Узлы DOM

Согласно стандарту W3C HTML DOM, все в документе HTML является узлом:

  • Весь документ является узлом документа
  • Каждый элемент HTML является узлом элемента
  • Текст внутри элементов HTML являются текстовыми узлами
  • Каждый атрибут HTML является узлом атрибута (устаревшим)
  • Все комментарии являются узлами комментариев

С помощью HTML DOM все узлы в дереве узлов могут быть доступны с помощью JavaScript.

Новые узлы могут быть созданы, и все узлы могут быть изменены или удалены.

Связи узлов

Узлы в дереве узлов имеют иерархическую связь друг с другом.

Термины родительский, дочерний и одноуровневый используются для описания связей.

  • В дереве узлов верхний узел называется корневым (или корневым узлом)
  • Каждый узел имеет ровно одного родителя, за исключением корня (который не имеет родителя)
  • Узел может иметь несколько дочерних
  • Братья или сестры — это узлы с одинаковым родителем

Огромный бесплатный видеокурс по основам JavaScript и связанным темам

На YouTube появился курс по основам JavaScript и связанным темам: ES6, React, чистому коду, структурам данных и шаблонам проектирования. В каждом разделе изложена необходимая ключевая информация, а видео одинаково удобно смотреть как в рамках курса, так и по отдельности для изучения интересующих вопросов.

Топ-пост этого месяца:  Вывод даты даты регистрации пользователя в человеческом формате

Для закрепления материала на практике можно воспользоваться учебной программой от freeCodeCamp. Ниже вы найдете все плейлисты курса и ссылки на отдельные видео по каждой теме. Курс пополняется. Приятного обучения!

Основы JavaScript

В первом блоке разбираются базовые понятия и синтаксис языка.

ECMAScript 6

Во втором блоке рассматривается ES6 — современный стандарт встраиваемого языка программирования, чьим расширением является JavaScript.

У нас есть шпаргалка по ES6 с основными хитростями, лучшими практиками и примерами: часть 1 и часть 2.

DOM (Document Object Model)

Третий раздел курса посвящен дереву DOM — объектной модели для XML- и HTML-документов.

  1. Выбор и изменение элементов сайта (DOM Manipulation).
  2. CSS стили (CSS Styles in JavaScript: Setting and Getting).
  3. События (DOM Events).
  4. addEventListener() — метод для добавления нескольких обработчиков к одному событию.
  5. Узлы (DOM Nodes).
  6. Анимация (Animation in the DOM).
  7. requestAnimationFrame() — метод для указания браузеру на воспроизведение анимации.
  8. Объект Window (Window Object) — параметры окна браузера.
  9. Всплывающие окна (Pop-ups Tutorial).
  10. cookies vs localStorage vs sessionStorage — разница между способами хранения данных в браузере.
  11. История (Browser History).

Чистый код

В этой части курса рассматриваются принципы написания чистого кода на JavaScript. Материал основан на статье Райана Макдермотта (Ryan McDermott), которая, в свою очередь, основана на книге Роберта Мартина (Robert C. Martin). Чистый код можно использовать многократно, он удобен для чтения и рефакторинга.

У нас есть подборка из 16 лучших практик написания читаемого кода. Этот и другие тематические материалы можно найти по тегу «Кодстайл».

Алгоритмы и структуры данных

Этот блок посвящен основам основ — автор рассказывает о разных видах алгоритмов и структур данных, показывая их реализацию на JavaScript.

Предлагаем ознакомиться с нашей подборкой статей по алгоритмам и структурам данных для начинающих, а также с другими полезными материалами в разделе «Алгоритмы».

Шаблоны проектирования

Шаблоны проектирования, или паттерны — это обобщенные проверенные способы решения часто встречающихся при проектировании проблем и вопросов.

У нас выложен видеокурс по теме «Шаблоны проектирования для новичков», а также отдельный материал про подводные камни использования паттерна Singleton.

Какие курсы по javascript выбрать?

Перед тем как принять решение в сторону выбора площадки для изучения, посмотрите их уроки которые есть в интернете (у некоторых, на букву Г, даже открытые курсы не очень хорошего качества).

У Html academy есть курсы по JS, сам не проходил, но курсы по Html у них хорошие.
html academy Базовый
html academy Продвинутый

так же хвалят курсы от Hexlet, и там не обязательно платить за все сразу, можно оплатить месяц (24 бакса вроде) и начать проходить, почитайте прайс
Hexlet профессия frontend js
Hexlet профессия backend js

+ если живете в Москве то можно попробовать на курсы специалиста походить, там уж точно научат.

с ними всё не так.
Задается задание из того самого бесплатного учебника «сделать от сих до сих».
На следующем занятии дежурное «есть вопросы?» Все молчат. Ну, ок. Вот вам новое задание из того самого бесплатного учебника. И так до конца курса. Потом хопа и разошлись. Ни проекта, ни минимального контроля знаний. Вообще пофиг всё.

На трекерах есть записи этих занятий. Можно послушать и убедиться.
Всё бы ничего, но если честно вымораживает, когда начинают рекомендовать то, где не были и о чем понятия не имеют только потому, что учебник действительно хорош.

Бесплатные практические курсы по основам программирования на JavaScript

Мы на Хекслете закончили полный цикл курсов по обучению PHP-программистов и переключились на стек JavaScript. Первые два курса новой программы уже доступны, и они бесплатные!

Курс «Основы программирования» — это знакомство с миром разработки и языком JavaScript. Курс рассчитан на новичков без опыта в программировании, но будет полезен и многим практикующим программистам, потому что покрывает таки темы как рекурсивные и итеративные процессы, чистые функции и побочные эффекты, автоматические тесты и модульное тестирование.

В курсе 27 видео-уроков с тестами и полноценными практическими заданиями. Вы познакомитесь с фундаментальными понятиями и концепциями программирования, научитесь писать простые программы, понимать ошибки, которые возникают при запуске и выполнении кода, получите опыт работы с модулями в JavaScript и получите необходимую базу для движения к следующим курсам учебной программы «Профессия JavaScript-программист».

Следующий курс — «JavaScript: подготовка к работе» посвящен установке и настройке рабочего окружения, необходимого для удобного и продуктивного программирования на языке JavaScript. Установка и настройка редактора кода и интерпретатора языка, знакомство с node и системой модулей (npm). Обзор Babel, eslint и js в современных браузерах.

Другие обновления
  • Добавили дополнительную практику после завершения курсов. Но эти задачи можно решать и не проходя соответствующий курс. Пока самая нерешаемая задача (12% начавших смогли решить ее) это Алгоритм Прима.
  • Обновили публичные профили учеников, вот пример профиля активного юзера
  • Обновили дэшборд (нужно быть залогиненым), теперь там видны не только текущие курсы, но и текущая практика и завершенные курсы
  • Добавили раздел вакансий для джуниор-программистов

Объект Node. Как перемещаться по DOM

Объект Node. Как перемещаться по DOM

Здравствуйте! Мы с вами уже рассмотрели что такое объект document и в этом уроке мы разберем собственно узел объекта document или Node. Дело в том, что каждый узел, будь то html-элемент, его атрибут или даже текст, в структуре DOM является объектом Node. Этот служебный объект имеет ряд свойств, с помощью которых вы можете перемещаться по дереву элементов DOM:

Давайте рассмотрим основные свойства объекта Node:

  • childNodes: возвращает коллекцию дочерних узлов элемента
  • firstChild: позволяет получить первый дочерний узел элемента
  • lastChild: позволяет получить последний дочерний узел текущего узла
  • previousSibling: находит предыдущий элемент, который находится на одном уровне модели DOM (так называемый сестринский элемент)
  • nextSibling: находит следующий элемент, который находится на одном уровне с текущим
  • ownerDocument: вернет корневой узел элемента
  • parentNode: возвращает родительский узел найденного элемента
  • nodeName: позволяет получить имя узла
  • nodeType: вернет тип узла в виде числа
  • nodeValue: вернет или установит значение узла в виде простого текста

Давайте рассмотрим пример перебора всех дочерних узлов элемента:

Здесь в примере с помощью метода document.querySelector(«div.artic») выбран элемент div с классом artic и далее мы просто пробегаемся по его дочерним узлам. Делаем это в цикле выводим имя узла и о тип с помощью соответствующих свойств nodeName и nodeType. Каждому типу должно соответствовать определенное число:

Топ-пост этого месяца:  2 новые функции в Инстаграм скрытие комментариев и премодерация
nodeType Тип узла
1 элемент
2 атрибут
3 текст

Но как видно из кода, хотя в блоке div на странице только 3 узла: h3 и два параграфа, но консоль отобразит нам аж пять узлов.

А все из-за того, что пробелы между узлами также будут считаться за отдельные текстовые узлы. А вот если бы пробелов не было:

То при переборе по данному узлу обнаружилось только 3 дочерних узла, как собственно и ожидалось.

Навигация по узлам дерева DOM

Вы можете использовать свойства nextSibling и previousSibling пройтись по узлам в прямом или обратном порядке. Давайте рассмотрим пример

Тут в принципе все аналогично, только в цикле мы обращаемся к следующему узлу, который находится на одном уровне с текущим. И результат мы получим такой же.
Аналогично можно перебрать все узлы только в обратном порядке: сначала надо получить последний узел, а затем обратиться к предыдущему узлу:

Итоги

В DOM доступна навигация по узлам элемента. Для нахождения соседних узлов используются методы previousSibling() и nextSibling().

Для получения коллекуии всех дочерних элементов узла используется метод childNodes().

Задания

Напишите код, который найдет элемент head
Напишите код, который получит список пользователей

Как проверить содержит ли элемент другие элементы

Напишите код. который проверял бы содержит ли элемент другие элементы иными словами вам надо проверить есть ил у элемента дочерние вложенные элементы

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Навигация по DOM

В предыдущем мануале – Доступ к элементам в DOM – вы узнали, как использовать встроенные методы объекта document для доступа к элементам HTML по идентификатору, классу, имени тега и селекторам запросов. Как вы уже знаете, DOM структурирован как дерево узлов: в корне находится узел document, а остальные узлы (включая элементы, комментарии и текстовые узлы) представляют ветки.

Читайте также: Дерево и узлы DOM

Часто вам нужно будет перемещаться по DOM без предварительного указания каждого элемента. Умение перемещаться вверх и вниз по дереву DOM и переходить от ветки к ветке необходимо для понимания того, как работать с JavaScript и HTML.

В этом мануале речь пойдет о навигации по DOM с помощью свойств родительских, дочерних и соседних узлов.

Подготовка

Для начала создайте файл nodes.html и добавьте в него такой код:

Learning About Nodes

Shark World

The world’s leading source on shark related information.

#16 — DOM (объектная модель документа).

Просмотрев это видео вы научитесь без различных библиотек находить элементы на вашей странице и вытаскивать их из DOM дерева. Вы узнаете все основные методы для этого, а так же познакомитесь с множеством полезных свойств для работы с узлами дерева.

Оставь комментарий!

7 thoughts on “ #16 — DOM (объектная модель документа). ”

Клёво, как раз сейчас plain js учу. Помогло!

Здравствуйте! Поясните, пожалуйста, что есть elems? Т.е.
var elems = document.getElementsByTagName(«p»);
Я пробовал перебирать elems, как массив, и всё работает!
Я пробовал перебирать elems, как объект, и всё снова работает!
Я пробовал выводить тип elems с помощью typeof и мне написало, что это объект, но если выводить elems в консоль, то элементы находятся в квадратных скобках, т.е. это массив? Чего-то я тут не понял. Очень жду ответа.

Elems — это набор DOM элементов — массив.

На остальные вопросы вы найдете ответы внимательно посмотрев уроки про объекты и массивы.

Результат запроса getElementsByTagName — это не массив, а специальный объект.

а почему Вы не использовали previousElementSibling и nextElementSibling?

У меня есть предположение,потому что это не кроссбраузерно(в IE
function getNextElement(elem) <

if (elem.nextElementSibling !== undefined) <
return elem.nextElementSibling;
>
var current = elem.nextSibling;

На ipad у видео плеера нету кнопки чтоб смотреть видео на весь экран(ipad 4)

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Работа с DOM деревом в Javascript

Чему вы научитесь

  1. Поиск DOM элементов по id, классам, тегам
  2. Универсальный поиск DOM элементов
  3. Изменение содержимого DOM элементов
  4. Навешивание событий на DOM элементы
  5. Добавление и удаление элементов
  6. Реализация валидации формы на javascript с всеми знаниями, полученными в серии

Необходимые знания

  1. Html
  2. Javascript (если вы смотрели серию javascript для начинающих, то этого должно хватить)

Для кого этот курс Для всех, кто никогда до этого не работал с DOM, либо начинает знакомиться с javascript. Если вы работали с такими библиотеками, как jQuery, то посмотрев этот курс поймете, какие методы вызываются внутри jQuery.

Дерево DOM

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией, деревом.

Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.

Пример DOM

Построим, для начала, дерево DOM для следующего документа.

В этом дереве выделено два типа узлов.

  1. Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
  2. Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.

Ещё узлы

Дополним страницу новыми тегами и комментарием:

В этом примере тегов уже больше, и даже появился узел нового типа — узел-комментарий. Казалось бы, зачем комментарий в DOM? На отображение-то он всё равно не влияет. Но так как он есть в HTML — обязан присутствовать в DOM-дереве.

Всё, что есть в HTML, находится и в DOM.

Поскольку DOM-модель в точности соответствует документу, пробельные символы так же важны, как и любой другой текст.

На картинке выше текстовые узлы, содержащие пробелы, выделены серым. Единственное исключение — пробелы перед и между HEAD / BODY на самом верхнем уровне документа. В DOM их никогда нет, согласно требованиям стандарта. Все остальные пробелы сохраняются в точности.

Пробелы есть в DOM, только если они есть в документе. Если не будет пробелов между тегами — не будет и пробельных узлов.

Следующий документ вообще не содержит пробельных узлов:

В IE до версии 9 пробельных узлов нет. DOCTYPE — тоже узел.

Возможности, которые дает DOM

DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы. Фактически, DOM предоставляет возможность делать со страницей всё, что угодно.

Добавить комментарий