Сегодня мы разберёмся, как работать с XML в JavaScript. Если XML звучит как что-то непонятное, не волнуйся! Мы разберём всё очень подробно, а также добавим побольше примеров, чтобы стало всё максимально понятно.
XML (наравне с HTML) это один из форматов для хранения данных, они видятся похожими на HTML. Давайте разберёмся в том, как их анализировать и отображать с помощью JavaScript.
XML (eXtensible Markup Language) — это текстовый формат для хранения и передачи данных. Он выглядит так:
<люди>
<человек>
<имя>Иван</имя>
<возраст>25</возраст>
</человек>
<человек>
<имя>Мария</имя>
<возраст>30</возраст>
</человек>
</люди>
Здесь у нас есть "люди", в которых содержится несколько "человек" с их "именем" и "возрастом". Это как бы такая табличка в текстовом виде.
Теперь, давай научимся, как разобрать такой XML с помощью JavaScript.
Есть несколько шагов, которые помогут тебе работать с XML:
Получить XML-данные: данные можно взять с сервера или просто хранить как строку в JavaScript.
Преобразовать их в объект: для работы с XML нам нужно преобразовать его в объект, с которым JavaScript умеет работать.
Извлечь данные: после этого можно извлекать конкретные значения.
Начнём с самого простого примера.
Предположим, у нас есть строка с XML:
const xmlString = `
<люди>
<человек>
<имя>Иван</имя>
<возраст>25</возраст>
</человек>
<человек>
<имя>Мария</имя>
<возраст>30</возраст>
</человек>
</люди>`;
Теперь нам нужно преобразовать её в объект. В JavaScript для этого есть встроенный объект DOMParser.
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
Теперь xmlDoc — это объект, с которым можно работать.
Чтобы извлечь данные, нам нужно обращаться к узлам 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
Иногда 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.
Иногда 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);
}
Вот и всё! Мы научились:
Разбирать XML строки в JavaScript.
Извлекать данные из XML с помощью методов, похожих на работу с HTML.
Обрабатывать ошибки в XML.
XML — это довольно старый, но всё ещё полезный формат для обмена данными. Теперь ты знаешь, как работать с ним, используя JavaScript! 🎉
Если у тебя остались вопросы или хочется больше примеров — пиши, я с радостью помогу! 😊
Не нашли нужной статьи?
Напишите нам и ее сделаем!