Одним из популярных форматов описания данных является формат XML. И язык JavaScript предоставляет инструментарий для работы с XML.
Для создания XML-объектов на основе строки, которая содержит данные в формате XML, применяется объект DOMParser.
Его методу parseFormString() можно передать соответствующую строку в качестве первого аргумента и тип MIME (обычно text/xml
)
в качестве второго аргумента. Если переданная строка содержит корректный код XML, то метод возвратит объект типа Document, который
будет содержать разобранный XML. А чтобы выбрать конкретные данные из полученного документа XML, можно применять стандартные методы выбора элементов DOM,
например, querySelector().
Например, рассмотрим следующую программу:
const xmlString = `<?xml version="1.0" encoding="UTF-8" ?> <users> <user name="Tom" age="39"> <company> <title>Microsoft</title> </company> </user> <user name="Bob" age="43"> <company> <title>Google</title> </company> </user> </users>`; const domParser = new DOMParser(); const xmlDOM = domParser.parseFromString(xmlString, "text/xml"); // обратимся к первому элементу user const firstUser = xmlDOM.querySelector("user"); console.log(firstUser.getAttribute("name")); // Tom console.log(firstUser.getAttribute("age")); // 39 console.log(firstUser.querySelector("title").textContent); // Microsoft
Здесь xml-документ задан строкой xmlString. Но пока это именно строка, а не xml-документ. И для парсинга строки в xml-документ создаем объект DOMParser и
выполняем его метод parseFormString()
, в который передается наша строка:
const domParser = new DOMParser(); const xmlDOM = domParser.parseFromString(xmlString, "text/xml");
Получив xml-документ, выбираем первый элемент user с помощью метода querySelector
const firstUser = xmlDOM.querySelector("user");
Далее мы можем обращаться к содержимому элемента user - к его вложенным элементам и атриубтам
console.log(firstUser.getAttribute("name")); // Tom console.log(firstUser.getAttribute("age")); // 39 console.log(firstUser.querySelector("title").textContent); // Microsoft
Для обратного преобразования - из xml-документа в строку применяется объект XMLSerializer. Этот объект предоставляет метод serializeToString(), который получает объект XML и возвращает объект XML в форме строки. Например:
const xmlString = `<?xml version="1.0" encoding="UTF-8" ?> <users> <user name="Tom" age="39"> <company> <title>Microsoft</title> </company> </user> <user name="Bob" age="43"> <company> <title>Google</title> </company> </user> </users>`; // преобразуем строку в XML const domParser = new DOMParser(); const xmlDOM = domParser.parseFromString(xmlString, "text/xml"); // преобразуем обратно из XML в строку const xmlSerializer = new XMLSerializer(); const xmlString2 = xmlSerializer.serializeToString(xmlDOM); console.log(xmlString2);
В итоге мы получим обратно изначальную строку xmlString.
Поскольку документ html по сути также является документом xml, то мы можем сериализовать в строку и html-страницу или ее часть. Например, преобразуем в строку текущую веб-страницу:
const xmlSerializer = new XMLSerializer(); const htmlString = xmlSerializer.serializeToString(document); console.log(htmlString);