Trabalhando com XML em JavaScript

Um dos formatos populares para descrição de dados é o XML, e o JavaScript fornece ferramentas para trabalhar com ele.

Transformando string em XML

Para criar objetos XML a partir de uma string contendo dados em formato XML, utiliza-se o objeto DOMParser. Seu método parseFromString() aceita a string como primeiro argumento e o tipo MIME (geralmente "text/xml") como segundo argumento. Se a string fornecida contiver um código XML válido, o método retornará um objeto do tipo Document, que conterá o XML analisado. Para selecionar dados específicos do documento XML resultante, podem ser utilizados métodos padrão de seleção de elementos DOM, como querySelector().

Por exemplo, considere o seguinte programa:

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");
// Seleciona o primeiro elemento 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

Neste exemplo, o documento XML é definido como a string xmlString. Mas, inicialmente, isso é apenas uma string, não um documento XML. Para analisar a string e transformá-la em um documento XML, criamos um objeto DOMParser e executamos seu método parseFromString() passando a string:

const domParser = new DOMParser();
const xmlDOM = domParser.parseFromString(xmlString, "text/xml");

Após obter o documento XML, selecionamos o primeiro elemento user com o método querySelector:

const firstUser = xmlDOM.querySelector("user");

Depois, podemos acessar o conteúdo do elemento user e seus elementos aninhados e atributos:

console.log(firstUser.getAttribute("name")); // Tom
console.log(firstUser.getAttribute("age")); // 39
console.log(firstUser.querySelector("title").textContent); // Microsoft

Serializando Documento XML para string

Para a conversão inversa - de um documento XML para uma string - utiliza-se o objeto XMLSerializer. Este objeto fornece o método serializeToString(), que recebe um objeto XML e retorna o XML na forma de uma string. Por exemplo:

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>`;

// Converte a string em XML
const domParser = new DOMParser();
const xmlDOM = domParser.parseFromString(xmlString, "text/xml");
// Converte de volta de XML para string
const xmlSerializer = new XMLSerializer();
const xmlString2 = xmlSerializer.serializeToString(xmlDOM);
console.log(xmlString2);

Já que um documento HTML também é um documento XML, podemos serializar uma página HTML ou parte dela em uma string. Por exemplo, para converter a página web atual em uma string:

const xmlSerializer = new XMLSerializer();
const htmlString = xmlSerializer.serializeToString(document);
console.log(htmlString);