Учебник XML DOM

Что такое DOM?

DOM или Объектная модель документа (англ. Document Object Model - DOM ) определяет стандарт доступа к документам и управления ими:

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

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

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

Понимание DOM является обязательным для всех, кто работает с HTML или XML.

HTML DOM

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

В следующем примере изменяется значение элемента HTML с id="demo":


<h1 id="demo">Это заголовок</h1>

<script>
 document.getElementById("demo").innerHTML = "Привет, мир!";
</script>

В следующем примере изменяется значение первого элемента <h1> в документе HTML:


<h1>Это заголовок</h1>
<h1>И это заголовок</h1>

<script>
 document.getElementsByTagName("h1")[0].innerHTML = "Привет, мир!";
</script>

Примечание: Даже если документ HTML содержит только ОДИН элемент <h1>, вам все равно необходимо указать индекс массива [0], потому что метод getElementsByTagName() всегда возвращает массив.

Подробнее о HTML DOM вы можете узнать в нашем учебнике по JavaScript.

XML DOM

Доступ ко всем элементам XML можно получить через XML DOM.

XML DOM это

  • Стандартная объектная модель для XML
  • Стандартный интерфейс программирования для XML
  • Независимость от платформы и языка
  • Стандарт W3C

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

Как получить значение XML элемента

Следующий код извлекает текстовое значение первого элемента <title> в XML-документе:


txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

Загрузка XML файла

В приведенных ниже примерах используется XML-файл books.xml.

В следующем примере загружается файл "books.xml" в объект xmlDoc и извлекается текстовое значение первого элемента <title> в books.xml:


<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

Объяснение примера:

  • xmlDoc - объект XML DOM, созданный парсером.
  • getElementsByTagName("title")[0] - получить первый элемент <title>
  • childNodes[0] - первый потомок элемента <title> (текстовый узел)
  • nodeValue - значение узла (сам текст)

Загрузка строки XML

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


<html>
<body>

<p id="demo"></p>

<script>
var text, parser, xmlDoc;

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

Интерфейс программирования

DOM моделирует XML как набор узловых объектов. Доступ к узлам можно получить с помощью JavaScript или других языков программирования. В этом учебнике используется JavaScript.

Программный интерфейс DOM определяется набором стандартных свойств и методов.

Свойства - это значения, которые вы можете устанавливать или изменять (например, nodename - "книга").

Методы - это некие действия, которые могут выполняться (например, удаление "книги").

Свойства XML DOM

Существует ряд типичных свойств DOM:

  • x.nodeName – имя "x"
  • x.nodeValue – значение "x"
  • x.parentNode – родительский узел "x"
  • x.childNodes – дочерние узлы "x"
  • x.attributes – атрибуты "x"

Примечание: В приведенном выше списке "x" — узловой объект.

Методы XML DOM

  • x.getElementsByTagName(имя) – получает все элементы с заданным именем тега
  • x.appendChild(узел) – вставляет дочерний узел в "x"
  • x.removeChild(узел) – удаляет дочерний узел из "x"

Примечание: В приведенном выше списке "x" — узловой объект.