Файл: Программирование клиентской части Интернет приложений с использованием JavaScript.pdf
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 01.12.2023
Просмотров: 104
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
СОДЕРЖАНИЕ
Привет!
Это учебная страница HTML.
100
При загрузке документа вызывается функция listOfAllElements(), которая в двух циклах просматривает семейство all объекта document и отображает диалоговое окно со всеми элементами HTML страницы.
Отметим, что по второму способу первым "объектом" семейства будет ссылка на свойство length семейства.
Иногда необходимо из всего множества объектов страницы выделить подмножество объектов, соответствующих некоторому типу элементов HTML. На странице обычно содержится несколько заголовков, например, первого уровня. В семействе all они расположены вперемежку с остальными объектами, но если необходимо выделить их из всего множества элементов, то подобную операцию можно осуществить, используя метод tags()семейства all:
Пример 24. Изменение цвета шрифта всех абзацев страницы
var paragraphs = document.all.tags('P') for (i=0; i < paragraphs.length; i++) paragraphs[i].style.color = 'blue';
Метод tags() возвращает семейство, хранящее ссылки на все элементы с указанным в качестве параметра именем тега. В дальнейшем работа со вновь созданным семейством осуществляется обычным способом.
Свойства и методы объектов
Большинство свойств объектов соответствуют атрибутам представляемых ими элементов HTML документа и имеют такие же имена, что и имена атрибутов. В сценарии можно получить значения интересующих атрибутов элемента или, наоборот, изменить их установку. Динамическое изменение свойств объектов, и, соответственно, представляемых ими элементов HTML, является основной концепцией динамического HTML.
Имена некоторых свойств объектов отличаются от имен атрибутов, но обычно достаточно близки к именам представляемых атрибутов. Например, свойство className соответствует атрибуту CLASS. Подобное несоответствие связано, в основном, с именами атрибутов, которые могут конфликтовать с зарезервированными ключевыми словами основных языков сценариев.
Некоторые свойства не соответствуют никаким атрибутам тегов. Эти свойства предоставляют дополнительную информацию об элементе и обычно являются свойствами только для чтения. С одним из подобных свойств мы уже знакомы.
Свойство tagName не соответствует никакому атрибуту и предоставляет информацию о типе тега элемента. Другим примером является свойство sourceIndex
, значением которого является индекс элемента в семействе all.
101
Некоторые свойства объектов доступны только для чтения. Это означает, что можно получить их значение, но нельзя изменить. Примером подобного свойства является свойство tagName, представляющее имя тега HTML элемента.
В объектной модели существуют свойства, представляющие целое множество свойств объекта. Они реализованы в виде семейств и к ним применима описанная выше технология работы с любым семейством JavaScript.
Свойство style объекта одно из таких свойств. Оно хранит значения всех свойств каскадных таблицей стилей, установленных для соответствующего элемента. Ключом доступа является имя свойства. Например, обратиться к свойству color какого-либо элемента HTML из сценария JavaScript можно с использованием следующего синтаксиса: ссылка_на_объект.style.color ссылка_на_объект.style['color']
В каскадных таблицах стилей свойства форматирования имеют названия, в которых используется дефис: background-color, margin-top, border- left и т.д. Имя такого свойства в сценарии определяется следующим образом:
1. Убирается из названия свойства дефис (-).
2. Часть имени свойства после дефиса присоединяется к предшествующей части с прописной буквы.
3. Предыдущие два пункта повторяются для всех вхождений дефиса в название свойства.
Например, свойство border-right-width в сценарии JavaScript будет выглядеть borderRightWidth, на свойство background-color можно ссылаться как backgroundColor.
Методы getAttribute(), setAttribute()и removeAttribute() любого элемента HTML позволяют, соответственно, получать, устанавливать значения его атрибутов или удалять их. Для методов getAttribute() и removeAttribute() параметром является строка, задающая имя атрибута, в метод setAttribute() кроме имени атрибута необходимо передать и его значение.
Эти три метода не чувствительны к регистру. Если для установки значения атрибута или для задания его имени важен регистр, то дополнительный, последний параметр, принимающий значения true или false, определяет чувствительность этих методов к регистру.
Выполнить прокрутку большого документа таким образом, чтобы какой-либо элемент HTML появился в окне браузера, можно методом scrollIntoView() этого элемента. Элемент может появиться вверху или внизу окна. Значение единственного параметра этого метода равное true (умалчиваемое значение) отображает элемент в верхней части области отображения, тогда как значение false соответствует отображению элемента в нижней части окна браузера.
102
Например, в следующем фрагменте сценария осуществляется быстрый переход к третьему заголовку первого уровня документа: var myH1=document.all.tags('H1'); if( myH1.length > 0 ) myH1[2].scrollIntoView(true);
Объектная модель позволяет осуществлять доступ к содержимому элементов и даже изменять не только содержимое, но и сами элементы заменять на другие.
Эти действия осуществляются с помощью следующих свойств объектов: innerHTML, innerText, outerHTML и outerText.
Свойства с префиксом inner отвечают за содержимое элемента HTML и позволяют в сценарии или получить его, или динамически заменить на новое, оставляя неизменными теги разметки самого элемента. Свойства с префиксом outer применяются ко всему элементу HTML (вместе с его открывающим и закрывающим тегами) и используются для замены элемента вместе с его содержимым на некоторый новый элемент.
Свойства с суффиксом Text работают с текстовым содержимым элемента HTML с удаленными тегами разметки, тогда как свойства с суффиксом HTML оперируют с размеченным тегами HTML содержимым.
На рисунке скобками отмечены "области влияния" рассмотренных четырех свойств элемента на его содержимое:
Содержимое элемента
innerHTML / innerText outerHTML / outerText
Для элемента P, представленного на рисунке, значением свойства innerText будет строка "Содержимое элемента"
Тогда как для свойства innerHTML строка "Содержимое элемента"
Значение свойства outerText совпадает со значением свойства innerText, а свойство outerHTML хранит полное описание элемента "
Содержимое элемента
"
Изменение в сценарии значений указанных свойств приводит либо к изменению содержимого элемента, либо его полной замене на новый элемент (в случае использования свойства outerHTML). Заметим, что можно задавать значения свойств с суффиксом Text и в виде строки с тегами разметки HTML, но в этом случае теги браузером не интерпретируются, а отображаются как обычный текст.
Методы insertAdjacentText и insertAdjacentHTML
В объектной модели DHTML для каждого элемента предусмотрены два метода, позволяющие добавить перед открывающим тегом (после закрывающего тега)
103 или в начало (конец) содержимого элемента простой текст или текст с разметкой
HTML: insertAdjacentText(положение, текст) insertAdjacentHTML(положение, текст)
Параметр текст является строковым литералом или строковой переменной. Для первого метода он содержит обычный простой текст, а для второго метода текст, размеченный тегами HTML, который интерпретируется браузером.
Параметр положение может принимать одно из следующих значений —
"beforeBegin", "afterBegin", "beforeEnd", "afterEnd". Место вставки текста в соответствии с указанными значениями этого параметра показано на рисунке:
Содержимое элемента
beforeBegin afterBegin afterEnd beforeEnd
Параметр
положение
Для размеченного текста HTML выполняется синтаксический разбор, и он отображается в соответствии с заданным форматированием. При этом корректируется объектная модель документа для отражения внесенного в документ изменения.
Упражнения
1. Разработать страницу для демонстрации возможностей свойств innerText, innerHTML, outerText, outerHTML и методов insertAdjacentText, insertAdjacentHTML. Страница может выглядеть следующим образом:
Страница состоит из абзаца и формы с полями, в которых отображаются значения указанных рядом с ними свойств абзаца. В этих же полях можно задать собственные значения свойств и нажатием расположенной слева соответствующей кнопки Изменить действительно изменить значения указанных свойств абзаца.
104
Для демонстрации работы методов в раскрывающемся списке Куда выбираются значения первого параметра, в поле Что задается второй параметр, а при нажатии на кнопку Вставить выполняется соответствующий метод абзаца.
2. Разработать страницу, текст которой представляет 3 главы книги (каждая глава занимает полторы области отображения браузера). В начале страницы поместить содержание, оформленное в виде гиперссылок. При щелчке на гиперссылке методом scrollIntoView() отобразить начало содержимого соответствующей главы. В конце каждой главы поставить ссылку, возвращающую пользователя на начало документа. Посмотреть действие параметра этого метода.
3. Разработать страницу, добавляющую при щелчке на любом элементе HTML к нему границу, определяемую с помощью свойств каскадных таблиц стилей.
4. Разработать страницу, тестирующую работу методов добавления, изменения и удаления атрибутов абзаца.
5. Разработать страницу, при загрузке которой в отдельном окне браузера отображается ее иерархическая структура DHTML со смещением названий тегов вложенных элементов вида: body p img b i p ul li b li p
Урок 14. Примеры динамических страниц HTML
Раскрывающийся список
Создать раскрывающийся список можно разными способами. Мы реализуем его с помощью вложенных элементов HTML UL и свойства display каскадных таблиц стилей, которое позволяет скрывать элементы страницы, не оставляя на ней даже выделенных под них блоков.
Поместим на страницу вложенный список:
105
- > Один
- >
- A
- Б
- A
- Два
- Три
Список idList составлен из трех элементов
, который не отображается (его свойство display равно none) и будет использован для создания раскрывающегося списка при щелчке на первом элементе списка. Строка, заданная в атрибуте TITLE, отображается в виде всплывающей подсказки при расположении курсора мыши над элементом. Этот фрагмент отображается как простой статический список из трех элементов
(вложенный список не отображается!) с маркерами.
Чтобы сделать список раскрывающимся, необходимо запрограммировать действия для первого элемента внешнего списка.
Но сначала запрограммируем изменение цвета этого элемента при наведении на него указателя мыши, чтобы пользователь обратил внимание на их "динамичность". Для этого добавим в его открывающий тег обработчики событий:
ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')"
Функция flashMe(), изменяющая цвет шрифта элемента, задается следующим кодом: function flashMe(eSrc, sColor) { eSrc.style.color=sColor
}
Теперь остается добавить обработчик щелчка кнопки мыши в первый элемент списка idList, выполняющий функцию отображения вложенного списка idListOneA
, если он скрыт, и скрывающий его, если он видим:
ONCLICK="toggleList(this.children[0])"
При вызове функции для ссылки на вложенный список idListOneA используется конструкция this.children[0]. В ней this ссылается на элемент LI, а он непосредственно порождает единственный вложенный элемент
— требуемый нам список idListOneA.
Исходный текст функции toggleList() приведен ниже:
106 function toggleListOneA(eTarget){ eTarget.style.display == "none" ? eTarget.style.display="block": eTarget.style.display="none"; eTarget.style.color = 'black';
}
Для того, чтобы раскрывшийся список idListOneA не был красного цвета, как и элемент LI, в который он вложен (свойство color наследуется), в функции toggleList() его цвет устанавливается черным.
Окончательно исходный текст сценария раскрывающегося списка выглядит так:
Раскрывающийся список
1 2 3 4 5 6 7 8 9 10 11
Пример 2.4: Раскрывающийся список
- ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')"
TITLE="Щелкни и раскрой"
> Один
- NAME="idListOneA"
- A
- Б
>
- A
- Два
- Три
Графический файл item.jpg в свойстве каскадных таблицей стилей item- style-image задает изображение маркера в списках. Свойство cursor определяет тип курсора мыши, когда он располагается над элементом. В нашем примере курсор будет меняться на изображение руки (значение свойства hand).
Раскрывшийся список закроется при щелчке на нем или на элементе LI, в который он вложен, так как в этом случае сработает эффект "всплытие" события.
Если требуется, чтобы список закрывался только при щелчке на элементе LI, следует добавить в открывающий тег- списка idListOneA обработчик события ONCLICK с кодом, прекращающим "всплытие" события:
- Узел 1
- Узел 2
- Потомок 1
- Потомок 2
- Потомок 3
- Потомок 1
- Узел 3
ONCLICK="window.event.cancelBubble=true"
Движущийся элемент
Положение абсолютно позиционированного элемента на странице легко изменить, установив новые значения его свойств top и left из встроенного сценария. Если организовать изменение значений этих свойств во времени, то элемент будет двигаться на странице по заданной траектории. В следующем примере реализовано движение раздела (элемент DIV) по окружности.
Движущийся раздел текста
Движущийся элемент
Динамический HTML позволяет программно менять положение элемента!width: 200; background-color: lightsteelblue;">
Добро пожаловать на страницу динамического HTML!
109 window с интервалом в 100 миллисекунд вызывается функция move(), которая и реализует перемещение во времени раздела.
Каждый раз при вызове функции move() изменяется значение параметра уравнений движения и в соответствии с ним определяется новое положение раздела — значения его свойств top и left. Уравнения движения — параметрическое уравнение окружности с центром в точке с координатами (x,y) и радиусом r.
Метод parseInt() используется в сценариях для выделения целого числа из значения свойств объектов, которые задаются вместе с размерностью. К ним относятся все размерные свойства, соответствующие атрибутам элементов HTML, и свойства каскадных таблиц стилей, задающие размеры и положение.
Динамическое изменение таблиц
Пусть в каком-либо документе задана таблица из трех рядов:Ячейка 1 первого ряда Ячейка 2 первого ряда
Ячейка 1 второго ряда Ячейка 2 второго ряда
Этот ряд перемещаем Этот ряд перемещаем
Необходимо переместить ее последний ряд на место предшествующего. Для решения этой задачи используются семейства rows объекта table, в котором хранятся ссылки на строки таблицы. У объекта, представляющего строку таблицы, есть семейство cells, хранящее ссылки на все ячейки таблицы.
Используя свойство innerHTML можно получить или изменить значение любой ячейки таблицы.
Приведем краткую сводку свойств, семейств и методов объектов, соответствующих элементам HTML, формирующим таблицу.
Объект table:
Семейства: all, children, cells, rows
Методы: deleteRow([rowIndex]) insertRow([rowIndex]) moveRow(rowIndex, targetRowIndex),
Объект tr:
110
Свойство: rowIndex
Семейства: all, children, cells
Методы: deleteCell([cellIndex]) insertCell([cellIndex])
Объект td:
Свойство: cellIndex
Семейства: all, children
Функция, перемещающая последний и предпоследний ряды таблицы, имеет следующий код:
Перемещение рядов таблицы
function fncInterchange(row){ var rowMove=row.rowIndex; var rowMove_Cell1=Table.rows[rowMove].cells[0].innerHTML; var rowMove_Cell2=Table.rows[rowMove].cells[1].innerHTML;
Table.deleteRow(rowMove); rowMove --;
Table.insertRow(rowMove);
Table.rows(rowMove).insertCell(0);
Table.rows(rowMove).insertCell(1);
Table.rows(rowMove).cells[0].innerHTML+= rowMove_Cell1;
Table.rows(rowMove).cells[1].innerHTML+= rowMove_Cell2;
}
В переменной rowMove сохраняется индекс перемещаемого ряда, передаваемого в качестве параметра. Переменные rowMove_Cell1 и rowMove_Cell1 хранят содержимое двух ячеек перемещаемого ряда. После этих подготовительных действий ряд удаляется методом rowDelete() объекта Table, и в таблицу вставляется новый ряд перед рядом, предшествующим удаленному. Последние операторы функции добавляют две ячейки в новый ряд и помещают в них содержимое соответствующих ячеек удаленного ряда.
Родственные отношения
Объектная модель DHTML раскрывает все родственные отношения, но для некоторых отношений требуется небольшое программирование.
Определить родителя объекта в объектной модели DHTML можно с помощью свойства parentElement.
Для нахождения ближайшего предыдущего родственника для элемента, непосредственно порождаемого другим элементом, следует выполнить действия,
111 определяемые в функции getPreviousSibling(), единственным параметром которой является объект, для которого ищется ближайший предыдущий родственник (в семействе children объекта-родителя): function getPreviousSibling(Obj){
// Определение родителя var Parent=Obj.parentElement;
// Определение ближайшего предыдущего родственника var iLength=Parent.children.length; for(var i=0;i < iLength;i++){
// родственник найден if(Parent.children[i]== Obj){ return Parent.children[i-1]; break;
}
}
}
Здесь приходится организовывать цикл по набору children объекта-родителя, пока не встретится исходный объект, для которого ищется ближайший родственник.
Упражнения
1. На странице отображается графическое изображение. Создать для нее сценарии: а) при расположении указателя мыши над графическим изображением оно заменяется другим, при последующих аналогичных действиях появляется новое изображение (предусмотреть до 5 новых изображений); б) на странице предусмотреть надпись, например, AUTOMATE, при щелчке на которой изображения начинают сменяться с интервалом в 5 секунд.
Предусмотреть возможность останова этого режима; в) предусмотреть две кнопки: щелчок на первой отображает предыдущее изображение, на второй — следующее. Картинки должны отображаться циклически: после последней первая и далее при щелчке на второй кнопке, а после первой последняя, предпоследняя и далее при щелчке на первой кнопке.
2. На странице присутствует графическое изображение. При наведении указателя мыши на изображение оно автоматически начинает смещаться вправо. При достижении границы окна начинает двигаться по его периметру по часовой стрелке.
3. Создать галерею изображений следующим образом. На странице представлен только список картин. При наведении указателя мыши на любой из элементов
112 списка справа от него отображается соответствующая выбранному пункту картина, когда указатель перемещается на другой пункт списка, то отображается другая картина, а когда указатель покидает область списка, то последняя отображаемая картина исчезает.
4. Создать сценарий, который при щелчке на рисунке сделает его невидимым не сразу, а постепенно "отрезая" от него все увеличивающиеся внешние части.
5. Разработать страницу HTML такую, что при щелчке на некотором заранее определенном элементе за текстом страницы начинает "падать" снег; при последующем щелчке на этом элементе — снег перестает "падать".
Урок 15. Объектная модель документа DOM
Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1-19981001 Консорциума WWW. В ней, как и в модели DHTML, документ представляется в виде логической древовидной структуры, но она предоставляет программисту большие удобства при работе с иерархической структурой объектов документа, чем объектная модель DHTML, позволяя:
Перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново
Создавать новые элементы и присоединять их к структуре документа в любом ее месте
Организовывать и манипулировать новыми или существующими ветвями структуры фрагмента документа до помещения объектов в структурное дерево документа
Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной.
Основное – это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями.
Другой важный аспект модели DOM — она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением.
Объектная модель документов, таким образом, как объектная модель, определяет:
интерфейсы и объекты, используемые для представления документа и манипулирования с ним;
113
семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты;
"родственные" связи и взаимодействие между этими интерфейсами и объектами.
Узлы объектной модели DOM
Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML,
SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.
Узлы в модели DOM документа HTML могут быть следующих типов:
Тип
Что представляет
1
Элемент HTML
3
Текстовое содержимое тега HTML
8
Комментарий HTML
9
Корневой элемент иерархической структуры
11
Фрагмент документа
Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:
#document
9
HTML
1
HEAD
1
BODY
1
Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).
Текстовое содержимое элемента HTML хранится в специальном текстовом узле
(тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов.
114
Например, рассмотрим следующий фрагмент документа HTML:
Это содержимое абзаца документа HTML
В объектной модели DOM он будет представлен следующим иерархическим деревом:
#text тип 3
Это
#text тип 3 абзаца
#text тип 3 содержимое
I тип 1
#text тип 3
HTML
#text тип 3 документа
P тип 1
B тип 1
На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария (свойство nodeName равно
#comment), являющихся листьями иерархического дерева объектов документа.
Перемещение по объектной модели
К узлам, и даже целым ветвям, можно получить доступ из сценария JavaScript, встроенного в документ. Концепция объектной модели документа позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это приводит к более простому и ясному коду по сравнению с кодом, реализующим изменение структуры документа в объектной модели DHTML.
На примере структуры, создаваемой вложенными списками, продемонстрируем, с помощью каких свойств объектов в модели DOM можно перемещаться по ее узлам:
В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями "родства", показанной на рисунке:
115
UL
1 id=parent
LI
1 id=Node1
LI
1 id=Node2
LI
1 id=Node3
#text
3
Узел1
#text
3
Узел2
UL
1 id=inside
#text
3
Узел3
LI
1 id=Child1
LI
1 id= Child2
LI
1 id= Child3
#text
3
Потомок1
#text
3
Потомок2
#text
3
Потомок3
Элементы с именами Node1, Node2 и Node3 являются узлами-потомками элемента-родителя с именем parent. В семействе childNodes объекта parent хранятся ссылки на всех потомков этого элемента (Node1, Node2 и
Node3). Для получения ссылок на первого и последнего потомка узла в объектной модели предусмотрены соответственно свойства firstChild и lastChild.
Свойство parentNode объектов-потомков возвращает ссылку родителя объектов, поэтому значением этих свойств объектов Node1, Node2 и Node3 будет ссылка на узел parent.
Объекты Node1, Node2 и Node3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью своих свойств previousSibling (предыдущий ближайший родственник) и nextSibling
(следующий ближайший родственник).
Если у элемента-узла нет соответствующих ближайших родственников, то эти свойства возвращают значение null.
Конечно, если все элементы HTML документа заданы с уникальными атрибутами
ID
, то разработчику документа достаточно просто в сценариях получать ссылки на такие объекты-узлы (значение атрибута ID элемента является именем соответствующего ему объекта в языках сценариев с использованием модели
DHTML и DOM). Но идентифицировать все элементы страницы дело утомительное, поэтому для перемещения по объектной модели можно использовать указанные выше свойства узлов.
Для изменения, установки или получения содержимого текстового узла (узлы остальных типов не имеют текстового содержимого ) в DOM используется
116 свойство nodeValue, тогда как в модели DHTML следует применять свойства innerHTML и innerText для любого элемента HTML:
// Объектная модель DOM
Node.childNodes[0].nodeValue = "Новое содержимое";
// Модель DHTML
Node.innerHTML = "Новое содержимое";
Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В DOM текстовое содержимое элемента HTML может храниться в одном или нескольких узлах-потомках типа 3, непосредственно порождаемых элементом HTML. Тогда как в объектной модели DHTML достаточно использовать одно из свойств innerHTML или innerText объекта, соответствующего элементу HTML.
Для доступа к объектной модели DOM загруженной в браузер страницы HTML прежде всего необходимо иметь ссылку на корневой элемент #document. Она создается автоматически и хранится в объекте window.document. Получить в
DOM ссылку на корневой объект документа, соответствующий элементу, задаваемому тегом1 2 3 4 5 6 7 8 9 10 11 - Узел 1
107