Чтобы написать первую программу нам необходимо освоить еще пару небольших тем. И первая из них это цепочка методов и свойств.
Давайте создадим объект, который будет состоять из метода и другого объекта.
Итак, суть цепочки методов заключается в том, что если мы заранее знаем, что выражением через оператор точку вернет другой объект (или тот же, как у нас в третьем ключе), то мы можем заранее в выражении вызвать параметры и методы этого возвращаемого объекта. Сейчас будет понстней.
Выражение o.b вернет объект b. А значит мы можем сразу же вызвать в этом выражении метод объекта b, также через точку.
Вот такая цепочка методов и свойств у нас получилась. Благодаря ней мы можем сократить код который пишем, ведь цепочки свойств и методов нам пришлось бы написать этот код как-то так, чтобы обратится к методу fun объекта subObject. Метод fun1 объекта SubObject возвращает число 13, но как помните и к числам мы помжем применять уже их методы, например ToString которое переводит число в строку
Вот такая длинная цепочка методов и свойств у нас получилась. А представьте если у нас не было возможности использовать цепочку методов, каким бы тогда был громоздким этот код.
Метод fun для объекта myObject я сделала для забавы. Смотрите, с помощью этого метода мы можем войти в бесконечный цикл вызова его же пока нам не надоест, так как метод возвращает объект myObject, у которого есть метод fun.
Теперь переходим к DOM. Зачем он нужен? Аббревиатура DOM расшифровывается как Document Object Model т.е. Объектная модель документа, и по сути это древовидная структура вашего сайта которая состоит из связанных между собой узлов.
Все теги, тексты внутри тегов и атрибуты называются узлами и эти узлы подразделяются на 6 типов:
- Элементы (Element Node) – это просто html теги как div, img и т.д.
- Текстовые узлы (Text Node) – это текст, который содержится внутри элементов, т.е. тегов
- Атрибуты (Attribute Node) – Это уже знакомые вам атрибуты тегов, такие как class, id и т.д.
- Комментарии (Comment Nodes) – Html комментарии тоже являются отдельными узлами
- Документ (Document Nodes) – Документ является верхним уровнем узла в DOM. Он представляет собой всю веб-страницу.
- Документный фрагмент (Document Fragment Nodes) – данный узел, является аналогом узла Документа, но не является частью основного дерева DOM. Т.е. он не отображается на вашей веб-странице. Данный узел нужен, когда вы создаете теги, и вам необходимо, чтобы они где то хранились, но пока не отображались в документе. Для того хранилища подходит узел Документальный фрагмент. Также такие теги можно просто хранить в оперативной памяти (в одной из практик я покажу как это делать), но хранение таких тегов в Документном фрагменте считается более эффективным, особенно когда необходимо обрабатывать большое количество узлов, так как обработка тегов в документном фрагменте происходит быстрее, чем в оперативной памяти.
Как видите, все узлы организованны в древовидную структуры и подразделяются на:
- Родительский узел: это узел который содержит другие узлы. Например этот тег боди является родителем для всех этих узлов.
- Дочерние узлы – узлы, которые находятся внутри родительского узла. Например этот тег див является дочерним для тега div
- Соседние узлы – узлы, которые находятся на одном уровне в дереве и имеют общего родителя. Например, эти теги div section являются соседними узлами. Если тег содержит атрибут , текст внутри то узел элемента, узел атрибута и текста все они находятся на одном уровне, здесь также комментарий является соседним для этих узлов.
А как же получить доступ к DOM через JavaScript? Вся структура DOM хранится в объекте document, у которого есть много свойств и методов для работы с элементами DOM. Сейчас рассматривать свойства и методы этого объекта мы не будем, а начнем изучать их уже начиная со следующего урока, где разработаем небольшую программу, которая даже сейчас используется в одной типографии нашего города.
