Работа с XML

Одним из популярных форматов описания данных является формат XML. И язык JavaScript предоставляет инструментарий для работы с XML.

Преобразование из строки в 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-документа в строку

Для обратного преобразования - из 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);