Сценарии объектной модели документа DOM XML

Связывание XML-документа с HTML-страницей, структура DOM, свойства и методы

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

Чтобы получить доступ к XML-документу с использованием DOM, вы должны связать XML-документ с HTML-страницей. На HTML-странице это можно сделать через так называемый фрагмент данных:

<XML ID="dsoDoc" SRC="Sample.xml"></XML>

Идентификатор ID, который вы назначаете фрагменту данных, указывает на DSO (Data Source Object) документа. Свойство объекта DSO "XMLDocument" содержит корневой объект DOM, называемый также "узел документа". Вы можете использовать это свойство для доступа к DOM в сценариях:

xmlDOM_Document = dsoDoc.XMLDocument;

Полный перечень свойств, методов и событий объекта DSO документа вы можете получить в MSDN, воспользовавшись, например, поиском по словосочетанию "xml Object". Если вы хотите иметь доступ к нескольким XML-документам с HTML-страницы, вы можете поместить фрагмент данных для каждого из них. Кроме того, вы можете включить несколько фрагментов данных для одного XML-документа. Последний приём может оказаться полезным для поддержки нескольких различных версий данных XML, если ваша страница модифицирует эти данные (в этой статье приёмы модификации XML-данных не рассматриваются).

Программные объекты, представляющие XML-документ, называются узлами. DOM использует различные типы узлов для представления различных компонентов XML:

Вы можете получить имя каждого узла из свойства узла nodeName. Имена, начинающиеся с символа #, представляют компоненты XML, не поименованные в документе. Например, комментарий в XML-документе не обладает именем. В связи с этим DOM использует стандартное имя #comment. В общем случае имена узлов соответствуют именам, присвоенным соответствующим компонентам в XML-документе.

Вы можете получить значение каждого узла из свойства узла nodeValue. Если компонент XML непосредственно не имеет значения, DOM устанавливает в качестве значения null.

Каждый узел, как программный объект, имеет свойства и методы. Все типы узлов, помимо специфического собственного набора свойств и методов, используют общий набор свойств и методов. Вот некоторые полезные свойства, поддерживаемые всеми типами узлов (полный перечень свойств, методов и событий узлов вы можете получить в MSDN, воспользовавшись, например, поиском по словосочетанию "IXMLDOMDocument/DOMDocument Members"):

Свойство будет иметь значение null, если оно неприменимо к данному конкретному узлу. Помимо общих свойств и методов, каждому типу узлов присущи дополнительные свойства и методы, специфические для определённого XML-компонента, который представляет узел. Вот некоторые полезные свойства, методы и события, предоставляемые корневым узлом документа:

Вот некоторые полезные методы, предоставляемые узлами документа типа Element:

Некоторые свойства и методы, приведённые выше, возвращают объект-коллекцию NodeList. Вот свойства и методы, поддерживаемые этой коллекцией:

Свойство attributes и некоторые другие свойства, приведённые ранее, возвращают объект-коллекцию NamedNodeMap. Эта коллекция несколько отличается от коллекции NodeList. Помимо свойств и методов коллекции NodeList, коллекция NamedNodeMap поддерживает метод getNamedItem:

Свойство text, описанное ранее, хорошо подходит для извлечения символьных данных элемента в том случае, если элемент не имеет дочерних элементов. Если элемент содержит один или более дочерних элементов помимо символьных данных, свойство text вернёт весь текст, включая текст дочерних элементов. Чтобы получить символьные данные только самого элемента, без символьных данных дочерних элементов, потребуется осуществить доступ к дочернему узлу типа Text. Символьные данные элемента хранятся в дочерних узлах типа Text, и их можно получить через свойство nodeValue каждого из дочерних узлов типа Text. Если символьные данные элемента смешаны с дочерними элементами, комментариями или инструкциями по обработке, каждый отдельный блок символьных данных представлен собственным дочерним узлом типа Text. Например, приведённый ниже элемент будет иметь три дочерних узла: узел типа Text, узел дочернего элемента и ещё один узел типа Text.

<ITEM>
    блок символьных данных
    <SUB-ITEM>текст подчинённого элемента</SUB-ITEM>
    ещё один блок символьных данных
</ITEM>

Полезные свойства и методы, предоставляемые узлами типа Text:

Пример отображения XML-документа на HTML-странице

Попробуем отобразить на HTML-странице следующий XML-документ, представляющий из себя некий абстрактный упрощённый каталог товаров:

<?xml version="1.0"?>
<!DOCTYPE PRODUCTS
     [
     <!ELEMENT PRODUCTS (PRODUCT)*>
     <!ELEMENT PRODUCT (TITLE, SORT+)>
     <!ELEMENT TITLE (#PCDATA)>
     <!ELEMENT COLOR (#PCDATA)>
     <!ELEMENT PRICE (#PCDATA)>
     <!ELEMENT SORT (COLOR, PRICE)>
     <!ATTLIST PRODUCT import (yes | no) "no">
     ]
>
<PRODUCTS>
    <PRODUCT import="yes">
        <TITLE> Product #1 </TITLE>
        <SORT>
            <COLOR> red </COLOR>
            <PRICE> $10.00 </PRICE>
        </SORT>
        <SORT>
            <COLOR> blue </COLOR>
            <PRICE> $11.00 </PRICE>
        </SORT>
        <SORT>
            <COLOR> gray </COLOR>
            <PRICE> $16.00 </PRICE>
        </SORT>
    </PRODUCT>
    <PRODUCT>
        <TITLE> Product #2 </TITLE>
        <SORT>
            <COLOR> red </COLOR>
            <PRICE> $20.00 </PRICE>
        </SORT>
        <SORT>
            <COLOR> green </COLOR>
            <PRICE> $22.00 </PRICE>
        </SORT>
    </PRODUCT>
    <PRODUCT import="yes">
        <TITLE> Product #3 </TITLE>
        <SORT>
            <COLOR> red </COLOR>
            <PRICE> $30.00 </PRICE>
        </SORT>
        <SORT>
            <COLOR> blue </COLOR>
            <PRICE> $33.00 </PRICE>
        </SORT>
    </PRODUCT>
    <PRODUCT>
        <TITLE> Product #4 </TITLE>
        <SORT>
            <COLOR> red </COLOR>
            <PRICE> $40.00 </PRICE>
        </SORT>
        <SORT>
            <COLOR> blue </COLOR>
            <PRICE> $44.00 </PRICE>
        </SORT>
    </PRODUCT>
    <PRODUCT>
        <TITLE> Product #5 </TITLE>
        <SORT>
            <COLOR> red </COLOR>
            <PRICE> $50.00 </PRICE>
        </SORT>
        <SORT>
            <COLOR> gray </COLOR>
            <PRICE> $55.00 </PRICE>
        </SORT>
    </PRODUCT>
</PRODUCTS>

Вот текст HTML-документа, отображающего этот каталог товаров:

<html>
<head>

<script for="window" event="onload">
//переменная, которая будет содержать разметку HTML
HTMLCode = "";
//получаем доступ к корневому объекту DOM 
doc = dsoPROD.XMLDocument;
//запускаем функцию проверки XML-документа на валидность
if(doc.readyState == 4) DisplayError();
else doc.onreadystatechange = DisplayError;
//перебираем в цикле все узлы документа
for(i=0; i<doc.documentElement.childNodes.length; i++){
	//получаем текущий узел (PRODUCT)
	nodePRODUCT = doc.documentElement.childNodes(i);
	//получаем значение атрибута "import"
	imp = nodePRODUCT.attributes.getNamedItem("import");
	if(imp.nodeValue == "yes") imp = " (импортный)";
	else imp = " (отечественный)";
	//включаем в вывод TITLE текущего PRODUCT'а (элемент TITLE всегда первый дочерний элемент у PRODUCT)
	HTMLCode += "<h3>" + nodePRODUCT.childNodes(0).text + imp + "<h3>";
	//получаем коллекцию сортов текущего PRODUCT'а (дочерние элементы SORT)
	nodesSORTS = nodePRODUCT.getElementsByTagName("SORT");
	//перебираем в цикле все сорта текущего PRODUCT'а
	for(j=0; j<nodesSORTS.length; j++){
		//получаем текущий сорт (узел SORT)
		nodesSORT = nodesSORTS(j);
		//включаем в вывод весь текст текущего сорта (это цвет и цена - дочерние элементы COLOR и PRICE)
		HTMLCode += "&nbsp;&nbsp;&nbsp; " + nodesSORT.text + "<br>"
	}//конец цикла по сортам текущего PRODUCT'а
}//конец цикла по всем узлам документа
//отображаем разметку HTML
ResultDiv.innerHTML = HTMLCode;

//функция отображает подробное сообщение об ошибке, если XML-документ не прошёл проверку на валидность
function DisplayError(){
    if(doc.readyState != 4) return;
    if(doc.parseError.errorCode){
        mess =
        "parseError.errorCode: " + doc.parseError.errorCode + "\n" +
        "parseError.filepos: " + doc.parseError.filepos + "\n" +
        "parseError.line: " + doc.parseError.line + "\n" +
        "parseError.linepos: " + doc.parseError.linepos + "\n" +
        "parseError.reason: " + doc.parseError.reason + "\n" +
        "parseError.srcText: " + doc.parseError.srcText + "\n" +
        "parseError.url: " + doc.parseError.url + "\n" +
        "";
        alert(mess);
    }
}
</script>

</head>

<body>
<xml ID="dsoPROD" SRC="Sample.xml"></xml>
<h1>Каталог товаров</h1>
<div id="ResultDiv"></div>
</body>
</html>

Приведённая выше HTML-страница содержит фрагмент данных для связи с XML-документом (с идентификатором "dsoPROD"), и скрипт, использующий свойства и методы объекта dsoPROD, который выводит содержимое XML-документа в элемент HTML-страницы DIV (с идентификатором "ResultDiv"), расположенный внизу страницы. Скрипт запускается в момент загрузки HTML-документа. Текст скрипта подробно прокомментирован и в дополнительных пояснениях не нуждается.

Отображение структуры произвольного XML-документа на HTML-странице

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

<html>
<head>

<script for="window" event="onload">
//получаем доступ к корневому объекту DOM 
doc = dsoPROD.XMLDocument;
//запускаем функцию проверки XML-документа на валидность
if(doc.readyState == 4) DisplayError();
else doc.onreadystatechange = DisplayError;
//отображаем корневой узел документа
ResultDiv.innerHTML = doc.url + "<br>" +
                      "<TABLE border='1' width='100%' cellspacing='0'>" +
                      "<TR><TH>Имя узла</TH><TH>Тип узла</TH><TH>Значение узла</TH></TR>" +
                      DisplayNodes(doc, 0) + "</TABLE>";
//*************************************************************************************************
//рекурсивная функция отображает все узлы XML-документа
//параметры:
//Node - объект текущего узла
//Level - номер текущего уровня иерархии (начинается с нуля)
function DisplayNodes(Node, Level){
	var i;
	var DisplayString = ""; //строка результатов
	//создание отступа для текущего уровня
	Indent = "";
	for(i=0; i<Level; ++i){
		Indent += "&nbsp;&nbsp;&nbsp;&nbsp;";
	}
	//получение свойств текущего узла
	DisplayString += "<TR>" +
	"<TD>" + Indent + Node.nodeName + "</TD>" +
	"<TD>" + Node.nodeTypeString + "</TD>" +
	"<TD>" + Node.nodeValue + "</TD>"+
	"</TR>";
	//получение атрибутов текущего узла
	Indent += "&nbsp;&nbsp;&nbsp;&nbsp;";
	for(i=0; Node.attributes != null && i<Node.attributes.length; ++i){
		DisplayString += "<TR>" +
		"<TD>" + Indent + Node.attributes(i).nodeName + "</TD>" +
		"<TD>" + Node.attributes(i).nodeTypeString + "</TD>" +
		"<TD>" + Node.attributes(i).nodeValue + "</TD>"+
		"</TR>";
	}
	//получение дочерних узлов текущего узла
	for(i=0; i<Node.childNodes.length; ++i){
		DisplayString += DisplayNodes(Node.childNodes(i), Level+1);
	}
	//возврат результатов
	return DisplayString;
}
//*************************************************************************************************
//функция отображает подробное сообщение об ошибке, если XML-документ не прошёл проверку на валидность
function DisplayError(){
    if(doc.readyState != 4) return;
    if(doc.parseError.errorCode){
        mess =
        "parseError.errorCode: " + doc.parseError.errorCode + "\n" +
        "parseError.filepos: " + doc.parseError.filepos + "\n" +
        "parseError.line: " + doc.parseError.line + "\n" +
        "parseError.linepos: " + doc.parseError.linepos + "\n" +
        "parseError.reason: " + doc.parseError.reason + "\n" +
        "parseError.srcText: " + doc.parseError.srcText + "\n" +
        "parseError.url: " + doc.parseError.url + "\n" +
        "";
        alert(mess);
    }
}
</script>

</head>

<body>
<xml ID="dsoPROD" SRC="RAc4_Pr2.xml"></xml>
<h1>Стуктура XML DOM</h1>
<div id="ResultDiv"></div>
</body>
</html>

Людоговский Александр

НОВОСТИ ФОРУМА Рыцари теории эфира

10.11.2021 - 12:37: ПЕРСОНАЛИИ - Personalias -> WHO IS WHO - КТО ЕСТЬ КТО - Карим_Хайдаров. 10.11.2021 - 12:36: СОВЕСТЬ - Conscience -> РАСЧЕЛОВЕЧИВАНИЕ ЧЕЛОВЕКА. КОМУ ЭТО НАДО? - Карим_Хайдаров. 10.11.2021 - 12:36: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от д.м.н. Александра Алексеевича Редько - Карим_Хайдаров. 10.11.2021 - 12:35: ЭКОЛОГИЯ - Ecology -> Биологическая безопасность населения - Карим_Хайдаров. 10.11.2021 - 12:34: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> Проблема государственного терроризма - Карим_Хайдаров. 10.11.2021 - 12:34: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> ПРАВОСУДИЯ.НЕТ - Карим_Хайдаров. 10.11.2021 - 12:34: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Вадима Глогера, США - Карим_Хайдаров. 10.11.2021 - 09:18: НОВЫЕ ТЕХНОЛОГИИ - New Technologies -> Волновая генетика Петра Гаряева, 5G-контроль и управление - Карим_Хайдаров. 10.11.2021 - 09:18: ЭКОЛОГИЯ - Ecology -> ЭКОЛОГИЯ ДЛЯ ВСЕХ - Карим_Хайдаров. 10.11.2021 - 09:16: ЭКОЛОГИЯ - Ecology -> ПРОБЛЕМЫ МЕДИЦИНЫ - Карим_Хайдаров. 10.11.2021 - 09:15: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Екатерины Коваленко - Карим_Хайдаров. 10.11.2021 - 09:13: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Вильгельма Варкентина - Карим_Хайдаров.