Как анализировать и отображать XML с помощью JavaScript

Сегодня мы разберёмся, как работать с XML в JavaScript. Если XML звучит как что-то непонятное, не волнуйся! Мы разберём всё очень подробно, а также добавим побольше примеров, чтобы стало всё максимально понятно.

XML (наравне с HTML) это один из форматов для хранения данных, они видятся похожими на HTML. Давайте разберёмся в том, как их анализировать и отображать с помощью JavaScript.

Что такое XML?

XML (eXtensible Markup Language) — это текстовый формат для хранения и передачи данных. Он выглядит так:

<люди>
  <человек>
    <имя>Иван</имя>
    <возраст>25</возраст>
  </человек>
  <человек>
    <имя>Мария</имя>
    <возраст>30</возраст>
  </человек>
</люди>

Здесь у нас есть "люди", в которых содержится несколько "человек" с их "именем" и "возрастом". Это как бы такая табличка в текстовом виде.

Теперь, давай научимся, как разобрать такой XML с помощью JavaScript.

Как проанализировать XML с помощью JavaScript?

Есть несколько шагов, которые помогут тебе работать с XML:

1. Получить XML-данные: данные можно взять с сервера или просто хранить как строку в JavaScript.

2. Преобразовать их в объект: для работы с XML нам нужно преобразовать его в объект, с которым JavaScript умеет работать.

3. Извлечь данные: после этого можно извлекать конкретные значения.

Начнём с самого простого примера.

Пример 1: Парсинг простой XML строки

Предположим, у нас есть строка с XML:

const xmlString = `
  <люди>
    <человек>
      <имя>Иван</имя>
      <возраст>25</возраст>
    </человек>
    <человек>
      <имя>Мария</имя>
      <возраст>30</возраст>
    </человек>
  </люди>`;

Теперь нам нужно преобразовать её в объект. В JavaScript для этого есть встроенный объект DOMParser.

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

Теперь xmlDoc — это объект, с которым можно работать.

Извлечение данных из XML

Чтобы извлечь данные, нам нужно обращаться к узлам XML, как к элементам HTML. Используем метод getElementsByTagName():

const people = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Имя: ${name}, Возраст: ${age}`);
}

Тут мы проходимся по каждому "человеку" и достаем их "имя" и "возраст". В результате в консоль выведется:

Имя: Иван, Возраст: 25
Имя: Мария, Возраст: 30

Пример 2: Разбор XML из HTML-документа

Иногда XML может быть частью веб-страницы, и нам нужно его разобрать прямо оттуда. Представим, что в нашем HTML есть такой элемент:

<div id="xml">
  <люди>
    <человек>
      <имя>Сергей</имя>
      <возраст>28</возраст>
    </человек>
    <человек>
      <имя>Ольга</имя>
      <возраст>34</возраст>
    </человек>
  </люди>
</div>

Чтобы получить этот XML и проанализировать его, мы можем сделать так:

const xmlStringFromHtml = document.getElementById("xml").innerHTML;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStringFromHtml, "text/xml");

const люди = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Имя: ${name}, Возраст: ${age}`);
}

Тут мы сначала берём HTML-контент, а затем используем его как XML.

Пример 3: Обработка ошибок

Иногда XML может быть некорректным, и нам нужно уметь это обрабатывать. Например, если тег не закрыт, то это может вызвать ошибку. Чтобы обработать её, можно добавить проверку:

const invalidXmlString = `<люди><человек><имя>Иван</имя><возраст>25</возраст></человек>`; // Ошибка: не закрыт <люди>

try {
  const xmlDoc = parser.parseFromString(invalidXmlString, "text/xml");
  const ошибка = xmlDoc.getElementsByTagName("parsererror");
  if (ошибка.length > 0) {
    console.error("Ошибка в XML:", ошибка[0].textContent);
  } else {
    console.log("XML корректен");
  }
} catch (e) {
  console.error("Ошибка при парсинге XML:", e);
}

Итоги

Вот и всё! Мы научились:

1. Разбирать XML строки в JavaScript.

2. Извлекать данные из XML с помощью методов, похожих на работу с HTML.

3. Обрабатывать ошибки в XML.

XML — это довольно старый, но всё ещё полезный формат для обмена данными. Теперь ты знаешь, как работать с ним, используя JavaScript! 🎉

Если у тебя остались вопросы или хочется больше примеров — пиши, я с радостью помогу! 😊