XML DOM

Объектная модель документа (DOM) определяет стандартный способ доступа к элементам документа и манипулирования ими.

HTML DOM

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

При помощи дерева HTML DOM можно получить доступ ко всем элементам HTML документа.

Подробнее о HTML DOM читайте в нашем Учебнике по JavaScript.

XML DOM

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

XML DOM представляет XML документ в виде древовидной структуры.

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

Загрузка данных из XML файла

В следующем примере XML документ загружается в объект XML DOM, из которого затем при помощи Javascript извлекается нужная информация:


<html>
<body>
   <h1>Заметка</h1>
   <div>
      <b>Кому:</b> <span id="to"></span><br />
      <b>От:</b> <span id="from"></span><br />
      <b>Сообщение:</b> <span id="message"></span>
   </div>

   <script>
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
         document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
         document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
       }
      };
      xhttp.open("GET", "note.xml", true);
      xhttp.send(); 
   </script>
</body>
</html>

Важное замечание!

Чтобы извлечь текст "Tove" из элемента <to> XML файла, используется следующее выражение:


getElementsByTagName("to")[0].childNodes[0].nodeValue

Обратите внимание, что даже если в XML файле присутствует только ОДИН элемент <to>, все равно необходимо использовать индекс массива [0]. Это объясняется тем, что метод getElementsByTagName() возвращает массив.

Загрузка данных из XML строки

В следующем примере XML строка загружается в объект XML DOM, из которого затем при помощи Javascript извлекается нужная информация:


<html>
<body>
   <h1>Заметка</h1>
   <div>
      <b>Кому:</b> <span id="to"></span><br />
      <b>От:</b> <span id="from"></span><br />
      <b>Сообщение:</b> <span id="message"></span>
   </div>

   <script>
      txt = "<note>";
      txt = txt + "<to>Tove</to>";
      txt = txt + "<from>Jani</from>";
      txt = txt + "<heading>Напоминание</heading>";
      txt = txt + "<body>Не забудь обо мне в эти выходные!</body>";
      txt = txt + "</note>";

      if (window.DOMParser)
      {
         parser = new DOMParser();
         xmlDoc = parser.parseFromString(txt,"text/xml");
      }
      else // Internet Explorer
      {
         xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
         xmlDoc.async = false;
         xmlDoc.loadXML(txt);
      }

      document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
      document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
      document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
   </script>
</body>
</html>

Пример XML в HTML

В следующем примере мы открываем XML файл и затем в цикле обходим каждый элемент CD и отображаем значения элементов ARTIST и TITLE в таблице HTML:


<html>
<body>
   <script>
      if (window.XMLHttpRequest)
      { // для IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp = new XMLHttpRequest();
      }
      else
      { // для IE6, IE5
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.open("GET","cd_catalog.xml",false);
      xmlhttp.send();
      xmlDoc = xmlhttp.responseXML;

      document.write("<table border='1'>");
      var x = xmlDoc.getElementsByTagName("CD");
      for (i = 0; i < x.length; i++)
      {
         document.write("<tr><td>");
         document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
         document.write("</td><td>");
         document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
         document.write("</td></tr>");
      }
      document.write("</table>");
   </script>
</body>
</html>

Подробнее о XML DOM читайте в нашем Учебнике по XML DOM.