7.6. Отображение переменного числа xml-элементов
Итак, выше был рассмотрен пример отображения XML-документа, имеющего известное число элементов. Если документ имеет неизвестное число элементов, использование DOM для отображения документа несколько усложняется.
Для больших XML-документов обычно заранее неизвестно, сколько может содержаться таких вложенных элементов, как, например, элементов BOOK в XML-документе из листинга 1.1. Если же количество элементов BOOK меняется, необходимо воспользоваться сценарием.
В Листинге 1.29 представлена HTML-страница, которая использует DOM для отображения документа из листинга 1.1 вне зависимости от того, сколько элементов BOOK в нем содержится. На рисунке 48 показано как будет выглядеть страница в Internet Explorer.
<HTML>
<HEAD>
<TITLE>Описание книги</TITLE>
<SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD">
HTMLCode ="";
Document = dsoInventory.XMLDocument;
for (i=0; i < Document.documentElement.childNodes.length; i++)
{
HTMLCode += "<SPAN STYLE='font-style:italic'>Заголовок: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(0).text
+"<BR>"
+ "<SPAN STYLE='font-style:italic'>Автор: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(1).text
+ "<BR>"
+ "<SPAN STYLE='font-style:italic'>Обложка: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(2).text
+ "<BR>"
+ "<SPAN STYLE='font-style:italic'>Количество страниц: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(3).text
+ "<BR>"
+ "<SPAN STYLE='font-style:italic'>Цена: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(4).text
+ "<P>";
}
DisplayDIV.innerHTML=HTMLCode;
</SCRIPT>
</HEAD>
<BODY>
<XML ID="dsoInventory" SRC="Inventory.xml"></XML>
<H2>Описание книги</H2>
<DIV ID="DisplayDIV"></DIV>
</BODY>
</HTML>
Листинг 1.28
Рисунок 48. Отображение большого XML-документа с использованием структуры DOM
Сценарий в рассматриваемом примере использует свойство length для определения количества элементов BOOK внутри корневого элемента. (Свойство length является членом группового объекта NodeList, предоставляемого свойством childNodes узла корневого элемента. См. таблицу 5.23.) В сценарии имеется цикл for, который выполняется для каждого элемента BOOK и включает код для отображения каждого из этих элементов:
for (1=0); i < Document.documentBement.childNodes.tength; i++)
{
/* код для отображения элемента BOOK... */
}
Поскольку количество элементов BOOK неизвестно, страница не может использовать фиксированный набор элементов SPAN в разделе BODY для отображений данных (как это делалось в предыдущем примере из Листинга 1.27). Вместо этого для каждого элемента BOOK сценарий динамически генерирует весь блок HTML-разметки, необходимый для отображения элемента:
for (i=0; i < Document.documentElement.childNodes.length; i++)
{
HTMLCode += "<SPAN STYLE='font-style:1talic'>Заголовок: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(0).text
+"<BR>"
+ "<SPAN STYLE='font-style:italic'>Автор: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(1).text
+ "<BR>"
+ "<SPAN STYLE='font-style:italic'>Обложка: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(2).text
+ "<BR>"
+ "<SPAN STYLE='font-style:italic'>Количество страниц: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(3).text
+ "<BR>"
+ "<SPAN STYLE='font-style:italic'>Цена: </SPAN>"
+ Document.documentElement.childNodes(i).childNodes(4).text
+ "<P>";
}
Сценарий хранит все эти блоки HTML-разметки в переменной HTMLCode. После цикла for, когда все блоки сгенерированы и загружены в HTMLCode, сценарий присваивает HTML-разметку свойству innerHTML элемента DIV раздела BODY страницы (этот элемент имеет ID DisplayDIV):
DisplayDIV.innerHTML=HTMLCode;
Элемент DIV затем сразу же получает HTML-разметку и отображает результаты.
Чтобы убедиться, что страница работала независимо от количества элементов BOOK, которое содержится в XML-документе, можно отредактировать фрагмент данных на этой странице, чтобы он отображал в два раза больше элементов BOOK, чем XML-документ из листинга 1.1.