Опубликован: 24.01.2007 | Уровень: для всех | Доступ: платный
Лекция 9:

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

Перемещение внутри XML-документа

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

Создайте страницу для перемещения между узлами

  1. Откройте новый, пустой текстовый файл в вашем текстовом редакторе и введите HTML-страницу, представленную в Листинге 9.9.
  2. Воспользуйтесь командой Save (Сохранить) вашего текстового редактора, чтобы сохранить документ на вашем жестком диске, присвоив ему имя файла ShowNodes.htm.
    <!-- Имя файла: ShowNodes.htm -->
    
    <HTML>
    
    <HEAD>
    
       <TITLE>Show DOM Nodes</TITLE>
    
       <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD">
          /* получить узел Document: */
          Document = dsoXML.XMLDocument;
    
          /* передача узла Document функции */
          DisplayDIV.innerText = DisplayNodes(Document, 0); 
    
          function DisplayNodes(Node, IndentLevel)
             {
             /* объявить локальные переменные для рекурсии: */
             var i;
             var DisplayString = "";
    
             /* создание отступа для данного уровня: */
             Indent = "";
             IndentDelta = "      ";
             for (i=0; i < IndentLevel; ++i)
                Indent += IndentDelta;    
     
             /* отображение свойств текущего узла: */
             DisplayString += Indent + "nodeName: "       
                            + Node.nodeName + "\n"
                            + Indent + "nodeType: "   
                            + Node.nodeType + "\n"
                            + Indent + "nodeTypeString: " 
                            + Node.nodeTypeString + "\n"
                            + Indent + "nodeValue: "      
                            + Node.nodeValue + "\n\n";
    
             /* отображение атрибутов для каждого из дочерних узлов: */
             Indent += IndentDelta;
             for (i=0; 
                  Node.attributes != null 
                  && i < Node.attributes.length; 
                  ++i)
                DisplayString += Indent + "nodeName: "       
                               + Node.attributes(i).nodeName + "\n"
                               + Indent + "nodeTypeType:   " 
                               + Node.attributes(i).nodeType + "\n"
                               + Indent + "nodeTypeString: " 
                               + Node.attributes(i).nodeTypeString 
                               + "\n"
                               + Indent + "nodeValue: "      
                               + Node.attributes(i).nodeValue 
                               + "\n\n";
    
             /* отображение каждого из дочерних узлов, не являющихся 
                атрибутами: */
             for (i=0; i < Node.childNodes.length; ++i)
                DisplayString += 
                  DisplayNodes(Node.childNodes(i), IndentLevel + 1);
    
             /* возврат строки, содержащей результаты: */
             return DisplayString;
             }
       </SCRIPT>
    
    </HEAD>
    
    <BODY>
    
       <XML ID="dsoXML" SRC="Inventory Dom.xml"></XML>
    
       <H2>XML Document Object Model (DOM) Nodes</H2>
       
       <DIV ID="DisplayDIV"></DIV>
    
    </BODY>
    
    </HTML>
    Листинг 9.9. ShowNodes.htm

    В начале сценарий передает узел Document функции DisplayNodes, которая возвращает отображаемую информацию данного узла и всех его дочерних узлов. Сценарий присваивает отображаемую информацию свойству innerText элемента DIV DisplayDIV в разделе BODY страницы, который затем отображает эту информацию:

    DisplayDIV.innerText = DisplayNodes(Document, 0);

    Второй параметр функции DisplayNodes задает уровень отступа, используемого при отображении информации узла.

    Функция DisplayNodes имеет следующую форму записи:

    function DisplayNodes(Node, IndentLevel)

    Функция выполняет следующие основные действия:

    • Она сохраняет соответствующее количество символов пробелов в переменной Indent, которая используется для создания отступа в начале каждой строки текста узла. Количество символов пробелов определяется значением параметра IndentLevel, передаваемого функции DisplayNodes:
      /* создание отступа для данного уровня: */
        Indent = "";
        IndentDelta = "  ";
        for (i=0; i < IndentLevel; ++i);
          Indent += IndentDelta;
    • Она сохраняет отображаемую информацию для текущего узла – т. е. узла, передаваемого функции DisplayNodes через параметр Node (изначально, узел Document ):
      /* отображение свойств текущего узла: */
        DisplayString += Indent + "nodeName: "
          + Node.nodeName + "\n"
          + Indent + "nodeTypeType: "
          + Node.nodeType + "\n"
          + Indent + "nodeTypeString: "
          + Node.nodeTypeString + "\n"
          + Indent + "nodeValue: "
          + Node.nodeValue + "\n\n";

      Подсказка. Если вы хотите увидеть дополнительные свойства для каждого узла, то можете добавить их в представленный выше фрагмент кода. Вы можете использовать любые общие свойства узла, приведенные в таблице 9.2. Однако не следует использовать специальные свойства, характерные для определенного узла (они приведены в таблице 9.3 для узлов Document ), поскольку они применимы не для всех типов узлов.

    • Она сохраняет отображаемую информацию для дочерних узлов Attribute текущего узла. Отступ при этом увеличивается на один уровень, указывая на то, что эти узлы являются дочерними для текущего узла:
      /* отображение атрибутов для каждого из дочерних узлов: */
        Indent += IndentDelta;
        for (i=0;
        Node.attributes != null
        && i < Node.attributes.length;
        ++i)
        DisplayString += Indent + "nodeName: "
          + Node.attributes(i).nodeName + "\n"
          + Indent + "nodeTypeType:   "
          + Node.attributes(i).nodeType + "\n"
          + Indent + "nodeTypeString: "
          + Node.attributes(i).nodeTypeString
          + "\n"
          + Indent + "nodeValue: "
          + Node.attributes(i).nodeValue
          + "\n\n";

      Примечание. Функция DisplayNodes не отображает дочерний узел Text узла Attribute, поскольку гораздо удобнее получить значение атрибута непосредственно из свойства nodeValue самого узла Attribute.

    • Функция DisplayNodes сохраняет отображаемую информацию для каждого дочернего узла, не являющегося атрибутом, осуществляя самостоятельный вызов для каждого из этих узлов. Такой вызов называется рекурсивным:
      /* отображение каждого из дочерних узлов, не являющихся атрибутами: */
        for (i=0; i < Node.childNodes.length; ++i)
        DisplayString +=
        DisplayNodes(Node.childNodes(i), IndentLevel + 1);
    • Функция DisplayNodes завершает свою работу, возвращая строку, содержащую всю информацию об узле:
      /* возврат строки, содержащей результаты: */
        return DisplayString;
  3. Откройте страницу в Internet Explorer 5.

    Обратите внимание, что свойство nodeTypeString содержит тип узла в виде строчных букв. (Так, "Document" и "ProcessingInstruction" превращаются в "document" и "processinginstruction".)

    Изначально страница отображает XML-документ Inventory Dom.xml (см. Листинг 9.1). Первая часть отображаемых результатов выглядит как показано на рисунке 9.8.


    Рис. 9.8.
  4. Чтобы просмотреть структуру узлов для других XML-документов, отредактируйте фрагмент данных страницы. Например, чтобы просмотреть узлы документа Inventory Valid Entity.xml (см. Листинг 6.1), вы должны изменить фрагмент данных следующим образом:
    <XML ID="dsoXML" SRC="Inventory Valid Entity.xml"></XML>
Максим Попов
Максим Попов

Почему при использовании скриптов, приведенных в курсе Основы XML

лекция Лекция 8: 

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

не происходит связывания XLM документа с HTML?

Отображаются пустые поля. Браузер IE11

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск