Document object model что это

Форум

Справочник

Введение. DOM в примерах.

Простейший DOM

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

Пример посложнее

Рассмотрим теперь более жизненную страничку:

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

Кстати, дерево на этом рисунке не учитывает текст, состоящий из одних пробельных символов. Например, такой текстовый узел должен идти сразу после

. DOM, не содержащий таких «пустых» узлов, называют «нормализованным».

Пример с атрибутами и DOCTYPE

Рассмотрим чуть более сложный документ.

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

Вообще-то это секрет, но DOCTYPE тоже является DOM-узлом, и находится в дереве DOM слева от HTML (на рисунке этот факт скрыт).

Нормализация в различных браузерах

При разборе HTML Internet Explorer сразу создает нормализованный DOM, в котором не создаются узлы из пустого текста.

На рисунке для краткости текстовые узлы обозначены просто решеткой. У body вместо 3 появилось 7 детей.

Opera тоже имеет чем похвастаться. Она может добавить лишний пустой элемент «просто от себя».

У меня получается 3 для IE, 7 для Firefox и 8 (!?) для Opera.

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

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

Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?

Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

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

Разберем подробнее способы доступа и свойства элементов DOM.

Доступ к элементам

Начнем с вершины дерева.

document.documentElement

document.body

Типы DOM-элементов

У каждого элемента в DOM-модели есть тип. Его номер хранится в атрибуте elem.nodeType

Всего в DOM различают 12 типов элементов.

Остальные типы в javascript программировании не используются.

Пример

Например, вот так выглядел бы в браузере документ из примера выше, если каждый видимый элемент обвести рамкой с цифрой nodeType в правом верхнем углу.

Дочерние элементы

Этих свойств вполне хватает для удобного обращения к соседям.

Свойства элементов

Рассмотрим здесь еще некоторые (не все) свойства элементов, полезные при работе с DOM.

tagName

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

style

Это свойство управляет стилем. Оно аналогично установке стиля в CSS.

Например, можно установить element.style.width :

Исходный код этой кнопки:

Например, для установки свойства z-index в 1000, нужно поставить:

innerHTML

Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.

Оно содержит весь HTML-код внутри узла, и его можно менять.

Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:

className

Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту «class».

Источник

Что такое DOM и зачем он нужен?

На этом уроке мы рассмотрим, что такое DOM, зачем он нужен, а также то, как он строится.

Что такое DOM

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера.

Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.

В Chrome исходный код страницы, который получает браузер, можно посмотреть во вкладке «Source» на панели «Инструменты веб-разработчика».

В Chrome инструмента, с помощью которого можно было бы посмотреть созданное им DOM-дерево нет. Но есть представление этого DOM-дерева в виде HTML-кода, оно доступно на вкладке «Elements». С таким представлением DOM веб-разработчику, конечно, намного удобнее работать. Поэтому инструмента, который DOM представлял бы в виде древовидной структуры нет.

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

Зачем нам нужен DOM API? Он нам нужен для того, чтобы мы могли с помощью JavaScript изменять страницу на «лету», т.е. делать её динамической и интерактивной.

DOM API предоставляет нам (разработчикам) огромное количество методов, с помощью которых мы можем менять всё что есть на странице, а также взаимодействовать с пользователем. Т.е. данный программный интерфейс позволяет нам создавать сложные интерфейсы, формы, выполнять обработку действий пользователей, добавлять и удалять различные элементы на странице, изменять их содержимое, свойства (атрибуты), и многое другое.

Сейчас в вебе практически нет сайтов в сценариях которых отсутствовала бы работа с DOM.

Из чего состоит HTML-код страницы

Перед тем, как перейти к изучению объектной модели документа необходимо сначала вспомнить, что из себя представляет исходный код веб-страницы (HTML-документа).

Исходный код веб-страницы состоит из тегов, атрибутов, комментариев и текста. Теги — это базовая синтаксическая конструкция HTML. Большинство из них являются парными. В этом случае один из них является открывающим, а другой – закрывающим. Одна такая пара тегов образует HTML-элемент. HTML-элементы могут иметь дополнительные параметры – атрибуты.

В документе для создания определённой разметки одни элементы находятся внутри других. В результате HTML-документ можно представить как множество вложенных друг в друга HTML-элементов.

В качестве примера рассмотрим следующий HTML код:

Теперь рассмотрим, как браузер на основании HTML-кода строит DOM-дерево.

Как строится DOM-дерево документа

Как уже было описано выше браузер строит дерево на основе HTML-элементов и других сущностей исходного кода страницы. При выполнении этого процесса он учитывает вложенность элементов друг в друга.

В результате браузер полученное DOM-дерево использует не только в своей работе, но также предоставляет нам API для удобной работы с ним через JavaScript.

При строительстве DOM браузер создаёт из HTML-элементов, текста, комментариев и других сущностей этого языка объекты (узлы DOM-дерева).

В большинстве случаев веб-разработчиков интересуют только объекты (узлы), образованные из HTML-элементов.

При этом браузер не просто создаёт объекты из HTML-элементов, а также связывает их между собой определёнными связями в зависимости от того, как каждый из них относится к другому в коде.

Элементы, которые находятся непосредственно в некотором элементе являются по отношению к нему детьми. А он для каждого из них является родителем. Кроме этого, все эти элементы по отношению друг к другу являются сиблингами (братьями).

Чтобы получить DOM-дерево так как его строит браузер, необходимо просто «выстроить» все элементы в зависимости от их отношения друг к другу.

Создание DOM-дерева выполняется сверху вниз.

При этом корнем DOM-дерева всегда является сам документ (узел document ). Далее дерево строится в зависимости от структуры HTML кода.

Например, HTML-код, который мы рассматривали выше будет иметь следующее DOM-дерево:

Источник

Браузерное окружение, спецификации

Язык JavaScript изначально был создан для веб-браузеров. Но с тех пор он значительно эволюционировал и превратился в кроссплатформенный язык программирования для решения широкого круга задач.

Сегодня JavaScript может использоваться в браузере, на веб-сервере или в какой-то другой среде, даже в кофеварке. Каждая среда предоставляет свою функциональность, которую спецификация JavaScript называет окружением.

Окружение предоставляет свои объекты и дополнительные функции, в дополнение базовым языковым. Браузеры, например, дают средства для управления веб-страницами. Node.js делает доступными какие-то серверные возможности и так далее.

На картинке ниже в общих чертах показано, что доступно для JavaScript в браузерном окружении:

Например, здесь мы используем window как глобальный объект:

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

Существует гораздо больше свойств и методов для управления окном браузера. Мы рассмотрим их позднее.

DOM (Document Object Model)

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объект document – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице.

Спецификация DOM описывает структуру документа и предоставляет объекты для манипуляций со страницей. Существуют и другие, отличные от браузеров, инструменты, использующие DOM.

Например, серверные скрипты, которые загружают и обрабатывают HTML-страницы, также могут использовать DOM. При этом они могут поддерживать спецификацию не полностью.

Правила стилей CSS структурированы иначе чем HTML. Для них есть отдельная спецификация CSSOM, которая объясняет, как стили должны представляться в виде объектов, как их читать и писать.

CSSOM используется вместе с DOM при изменении стилей документа. В реальности CSSOM требуется редко, обычно правила CSS статичны. Мы редко добавляем/удаляем стили из JavaScript, но и это возможно.

BOM (Browser Object Model)

Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером (окружением), чтобы работать со всем, кроме документа.

Вот как мы можем использовать объект location :

Функции alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем.

BOM является частью общей спецификации HTML.

Да, вы всё верно услышали. Спецификация HTML по адресу https://html.spec.whatwg.org не только про «язык HTML» (теги, атрибуты), она также покрывает целое множество объектов, методов и специфичных для каждого браузера расширений DOM. Это всё «HTML в широком смысле». Для некоторых вещей есть отдельные спецификации, перечисленные на https://spec.whatwg.org.

Итого

Говоря о стандартах, у нас есть:

Кроме того, некоторые классы описаны отдельно на https://spec.whatwg.org/.

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

Когда вам нужно будет прочитать о каком-то свойстве или методе, справочник на сайте Mozilla https://developer.mozilla.org/ru/search тоже очень хороший ресурс, хотя ничто не сравнится с чтением спецификации: она сложная и объёмная, но сделает ваши знания максимально полными.

Для поиска чего-либо обычно удобно использовать интернет-поиск со словами «WHATWG [термин]» или «MDN [термин]», например https://google.com?q=whatwg+localstorage, https://google.com?q=mdn+localstorage.

А теперь давайте перейдём к изучению DOM, так как страница – это основа всего.

Источник

В чём разница между узлом и элементом DOM?

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

При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?

1. Узел DOM

Ключ к пониманию различия между узлом и элементом заключается в знании о том, что собой представляет узел.

Если рассматривать ситуацию в общих чертах, то оказывается, что DOM-документ включает в себя иерархию узлов. У каждого узла может быть родитель и (или) потомок.

Посмотрим на следующий HTML-документ:

В документ входит следующая иерархия узлов:

и абзац

Теги в HTML-документе представляют узлы. Интересно то, что обычный текст — это тоже узел. Узел-абзац

▍Типы узлов

Это свойство может иметь одно из следующих значений, представляющих тип узла:

Например, давайте выберем узел-абзац и посмотрим на его свойство nodeType :

В абзаце, кроме того, имеется текстовый узел:

Есть тип узла, который представляет всё дерево узлов документа. Это — Node.DOCUMENT_NODE :

2. Элемент DOM

После того, как мы разобрались с тем, что такое узел DOM, пришло время поговорить том, чем различаются узлы и элементы DOM.

— это всё элементы, так как они представлены тегами.

А вот сам документ, комментарий, текст — это не элементы, так как они не представлены соответствующими тегами:

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

3. Свойства DOM: узлы и элементы

Помимо различения узлов и элементов нужно ещё различать свойства DOM, которые содержат исключительно узлы или исключительно элементы.

Следующие свойства могут содержать либо узел ( Node ), либо коллекцию узлов ( NodeList ):

А вот следующие свойства могут содержать либо элементы ( HTMLElement ), либо коллекции элементов ( HTMLCollection ):

Рассмотрим следующий элемент-абзац, содержащий какой-то текст:

Откройте этот демонстрационный пример и посмотрите на свойства childNodes и children узла-абзаца:

Коллекция paragraph.childNodes содержит 2 узла: текст, оформленный полужирным шрифтом с помощью тега ( Thank you ), и текстовый узел ( for visiting my web page! ).

Но в коллекции paragraph.children имеется лишь 1 элемент, представленный тегом ( Thank you ).

Так как свойство paragraph.children содержит только элементы, текстовый узел в него не включён. Произошло это из-за того, что с точки зрения системы это — текст ( Node.TEXT_NODE ), а не элемент ( Node.ELEMENT_NODE ).

4. Итоги

Документ DOM — это иерархическая коллекция узлов. У каждого узла могут быть родители и (или) потомки.

Отличие между узлами и элементами DOM становится очевидным в том случае, если есть понимание того, что такое узел.

У узлов имеется свойство, указывающее на их тип. Один из этих типов соответствует элементам DOM. Элементы представлены тегами в HTML-документе.

Сталкивались ли вы со сложностями, касающимися различения узлов и элементов DOM?

Источник

Document Object Model & Browser Object Model

Прежде чем приступить к изучению DOM и BOM познакомимся с консолью разработчика.

Console API

Console API добавляет глобальную переменную JavaScript под названием console для всех веб-страниц. Этот объект содержит набор удобных функций для выполнения общих задач: выбора и проверки DOM элементов, отображение данных в удобном для чтения формате, а также мониторинг событий DOM.

Меню Console Меню Console и меню Elements вместе

console.clear()

Пожалуй одна из самых простых в понимании команд. Очистка консоли.

Очистка консоли

Метод применяется для вывода сообщений на консоль(иными словами процесс протоколирования). В качестве параметров может принимать один или более аргументов.

See the Pen Console.log by user zamt (@userzamt) on CodePen.

Первым аргументом для вывода может быть строка, содержащая один или несколько спецификаторов формата. Спецификатор формата состоит из символа %, за которым следует буква, указывающая на тип выводим данных.

Вот не полный набор спецификаторов формата, которые можно использовать для подстановки строк:

Так же как и console.log() выводит сообщения на консоль, но в сообщение добавляется круглая иконка с символом «i» внутри.

Так же как и console.log() выводит сообщения на консоль, но в сообщение добавляется треугольная иконка с восклицательным знаком внутри.

console.group*

Все следующие выводы на консоль после метода console.group() будут группироваться в один список. console.groupEnd() закрывает список.

See the Pen xqZQbx by user zamt (@userzamt) on CodePen.

Метод console.groupCollapsed() похож на console.group() за одним лишь исключением. Группа созданая с помощью console.groupCollapsed() по умолчанию находится в закрытом состоянии(«свёрнутой»).

console.table

console.table выводит информацию на консоль в виде таблицы.

Данный метод обеспечивает простой способ просмотра объектов и массивов, которые содержат и данные. При вызове, он будет принимать свойства объекта и создать заголовки на основе их имён.

console.time*

Вызов метода console.timeEnd() останавливает работу указаного таймера и выводит прошедшее время с его запуска.

console.count([name])

console.count() выводит на консоль число, равное количеству вызовов строки, где указан данный метод. Так же необходимо указать имя счётчика. Это имя будет отображаться при выводи значения счётчика. Если имя не задано, то в качестве имени берётся номер строки.

console.dir(object)

Метод console.dir() выводит список всех свойств объекта. Входное значение для отображения свойств должно быть объектом.

Объектная модель документа DOM

Это API обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания.

Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями «родительский-дочерний».

По сути, DOM связывает веб-страницы со скриптами или языками программирования.

Связь HTML, DOM и JavaScript

Возможности DOM

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

Дерево DOM

Браузер, получая код HTML из интернета, сначала строит дерево узлов (объектов) в своей памяти. А уже потом на основе этого дерева «рисует» картинку этой страницы в своём окне или вкладке.

Условный процесс отображения страницы в браузере

Постороим дерево DOM для следующего примера

Связи между узлами определяются на основе того что каждый элемент в HTML документе вложен в какой-то другой элемент. Элемент, который содержит другие элементы, по отношению к ним является родителем. У любого элемента в HTML коде есть свой родитель и притом только один. Если элемент содержит другие элементы, то для него они являются дочерними (детьми, прямыми потомками). Один элемент может содержать сколько угодно много дочерних элементов.

Дерево DOM строится браузером сверху вниз.

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

Типы узлов (NODE) документа

В предыдущем примере, дерево DOM состоит только из узлов, образованных элементами. Но, узлы в дереве образуются не только на основе элементов, но и на основе текста, комментариев и вообще на основе всего, что есть в HTML разметке.

Например, текст, заключённый между открывающим и закрывающим тегом

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

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

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

Всего различают 12 типов узлов, но в основном используются узлы, образованные на основе HTML элементов и текста. Рекомендуется использовать только 7 из них(остальные считаются устаревшыми), но на практике в основном работают с 4.

Определение типа узла DOM

Кроме определения типа узла ( nodeType ) с помощью JavaScript можно также узнать его имя и значение:

Навигация по DOM-элементам

DOM позволяет делать что угодно с HTML-элементом и его содержимым, но для этого нужно сначала его получить.

Ссылки на узлы дерева

Пример получения всех дочерних элементов

Вывод первого и последнего элемента

Выясняем родителя и родителя родителя(«бабушку/дедушку»)

Кроме как двигаться сверху вниз и снизу вверх по дереву, JavaScript также позволяет двигаться в горизонтальном направлении между соседними узлами, т.е. узлами, которые имеют одного родителя.

Узнать соседей Узнать соседей 2(что то осмысленное)

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

Поэтому существует дополнительный набор ссылок, которые могут перемещаться по узлам дерева, образованными только элементами.

Ссылки на узлы дерева образованные элементами

Эти ссылки похожи на предыдущие, но только в ряде мест стоит слово Element:

Поиск элементов

Прямая навигация от родителя к потомку удобна, если элементы рядом. А если нет? По поиск становиться не эффективным.

Поэтому, чтобы найти узлы в дереве, веб-разработчики используют специально предназначенные для поиска методы объекта document или узла (node).

document.getElementById(elementID)

getElementsByTagName(tagname)

Метод ищет все элементы с заданным тегом внутри элемента(или внутри document ) и возвращает их в виде списка.

getElementsByTagName(tagname) возвращает все найденные элементы в виде объекта NodeList (коллекции узлов). Получение определённого узла в коллекции осуществляется по индексу.

document.getElementsByName(name)

Метод getElementsByName(name) возвращает все найденные элементы в документе, имеющих указанное имя (значение атрибута name ), в виде коллекции узлов.

Элементы (узлы) добавляются в коллекцию в том порядке, в котором они встречаются в дереве. Получение определённого узла в коллекции осуществляется по индексу.

getElementsByClassName(className)

Элементы (узлы) добавляются в коллекцию в том порядке, в котором они встречаются в дереве. Получение определённого узла в коллекции осуществляется по индексу.

querySelectorAll(cssSelector)

Метод возвращает все найденные элементы внутри документе (для document ) или среди дочерних узлов (для node ), которые соответствуют CSS селектору, указанному в качестве параметра данного метода, в виде коллекции узлов.

querySelector(cssSelector)

Данные метод возвращает не все, а только первый элемент, соответствующий CSS-селектору.

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

matches(cssSelector)

Этот метод ничего не ищет, а проверяет, удовлетворяет ли элемент селектору.

Метод elem.matches(cssSelector) вернет true или false, в зависимости от того, соответствует ли элемент указаному css-селектору.

closest(cssSelector)

Иначе говоря, метод closest бежит от текущего элемента вверх по цепочке родителей и проверяет, подходит ли элемент под указанный CSS-селектор. Если подходит – останавливается и возвращает его.

Свойства узлов

tagName

Свойство возвращает HTML-тег элемента.

Разница между tagName и nodeName неочевидно, но она отражена в названиях свойств.

Свойство tagName есть только у элементов.

Таким образом, при помощи tagName мы можем работать только с элементами, а nodeName может что-то сказать и о других типах узлов.

innerHTML

outerHTML

Свойство возвращает HTML элемент целиком в виде строки, содержащей сам элемент и его дочерние элементы.

Изменить outerHTML элемента невозможно.

Пример свойств innerHTML и outerHTML

textContent

Позволяет задавать или получать текстовое содержимое элемента и его потомков.

Свойство textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.

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

Другие свойства узлов

Работа с атрибутами

getAttribute(attributeName)

setAttribute(name, value)

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

removeAttribute(attributeName)

hasAtrribute(attributeName)

Работа с классами элементов

elem.classList.contains(class)

Возвращает true или false в зависимости от того имеет ли элемент указанный класс.

elem.classList.add(class1,class2. )

Добавляет один или несколько к элементу классов. Если указанный класс уже есть у элемента, то он не будет добавлен.

elem.classList.remove(class1,class2. )

Удаляет один или несколько указанных у элемента классов. Если Вы указали класс, который не существует у элемента, то это не приведёт к ошибке в работе метода.

elem.classList.toggle(class, true|false)

Переключает указанное имя класса у элемента. Если класса class нет, добавляет его, если есть – удаляет.

С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript. Как правило, это делается при помощи атрибутов data-*

Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных.

К таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset

See the Pen DOM. dataset by user zamt (@userzamt) on CodePen.

Добавление и удаление узлов

Добавление нового узла к дереву обычно осуществляется в 2 этапа:

document.createElement(tagname)

document.createTextNode(data)

Это пока что пустой пример. Так сказать заготовка.

Давайте создадит новый элемент. Добавим к нему уже заготовленый класс и укажем текст.

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

parentElem.appendChild(elem)

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

parentElem.insertBefore(elem, nextSibling)

Теперь добавим наш новый элементв в DOM

node.cloneNode(deep)

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

parentElem.removeChild(child)

parentElem.replaceChild(newChild, oldChild)

Источник