XML DOM Уроки

Что такое DOM?

DOM определяет стандартные методы доступа и операции с документом:

“W3C Document Object Model (DOM) — это интерфейс, независимый от платформы и языка, который позволяет программам и скриптам динамически обращаться и обновлять содержимое, структуру и стиль документа.”

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

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

Для любого, кто использует HTML или XML, понимание DOM является необходимым.

HTML DOM

Все элементы HTML можно получить доступ через HTML DOM.

Пример 1

Этот пример изменяет значение HTML-элемента с id="demo":

<h1 id="demo">Это заголовок</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Попробуйте сами

Пример 2

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

<h1>Это заголовок</h1>
<h1>Это заголовок</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>

Попробуйте сами

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

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

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

Этот пример загружает текстовую строку в объект XML DOM и использует JavaScript для извлечения информации из нее:

Пример

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>"
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</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 - "book").

МетодыОбычно это означает, что можно сделать что-то (например, удалить действие "book").

Свойства XML DOM

Вот несколько примеров стандартных свойств DOM:

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

Примечание:В上面的列表е, x - это объект узла.

XML DOM 方法

  • x.getElementsByTagName(name) - Получение всех элементов с заданным именем тега
  • x.appendChild(node) - Вставка подузла в x
  • x.removeChild(node) - Удаление подузла из x

Примечание:В следующем списке:x Это объект узла.