Учебник по XML DOM
XML DOM
Что такое ДОМ?
DOM определяет стандарт доступа к документам и манипулирования ими:
HTML DOM определяет стандартный способ доступа к документам HTML и управления ими. Он представляет HTML-документ в виде древовидной структуры.
XML DOM определяет стандартный способ доступа к документам XML и управления ими. Он представляет XML-документ в виде древовидной структуры.
Понимание DOM является обязательным для всех, кто работает с HTML или XML.
HTML DOM
Доступ ко всем элементам HTML можно получить через HTML DOM.
В этом примере изменяется значение элемента HTML с id="demo":
Пример
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
В этом примере изменяется значение первого элемента <h1> в документе HTML:
Пример
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</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 определяется набором стандартных свойств и методов.
Свойства часто называют чем-то, что есть (например, имя узла — «книга»).
Методы часто называют чем-то, что делается (например, удаление «книги»).
XML DOM Properties
Вот некоторые типичные свойства DOM:
- x.nodeName - имя x
- x.nodeValue - значение x
- x.parentNode - родительский узел x
- x.childNodes - дочерние узлы x
- x.attributes - узлы атрибутов x
Примечание. В приведенном выше списке x — это объект node.
Методы XML DOM
- x.getElementsByTagName( name ) — получить все элементы с указанным именем тега
- x.appendChild( node ) — вставить дочерний узел в x
- x.removeChild( node ) — удалить дочерний узел из x
Примечание. В приведенном выше списке x — это объект node.