Każda usługa SOAP, z którą miałeś do czynienia, każdy kanał RSS, który skonsumowałeś, każde SVG, którym manipulowałeś — wszystko to jest XML. JavaScript ma dwa wbudowane sposoby parsowania go w przeglądarce oraz solidną bibliotekę npm dla Node.js. Trudna część to nie samo parsowanie, lecz nawigacja po wynikowym DOM, obsługa przestrzeni nazw i unikanie pułapek, które łapią każdego za pierwszym razem. Przejdźmy przez prawdziwe wzorce.
DOMParser — Parsowanie XML w przeglądarce
Wbudowane API przeglądarki
DOMParser
konwertuje łańcuch XML na dokument DOM. Użyj typu MIME 'application/xml'
(nie 'text/html'), aby parser zastosował rygorystyczne reguły XML:
const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<library>
<book isbn="978-0-13-110362-7">
<title>The C Programming Language</title>
<authors>
<author>Brian W. Kernighan</author>
<author>Dennis M. Ritchie</author>
</authors>
<year>1988</year>
<price currency="USD">45.99</price>
</book>
<book isbn="978-0-201-63361-0">
<title>The Pragmatic Programmer</title>
<authors>
<author>Andrew Hunt</author>
<author>David Thomas</author>
</authors>
<year>1999</year>
<price currency="USD">52.00</price>
</book>
</library>`;
const parser = new DOMParser();
const doc = parser.parseFromString(xmlString, 'application/xml');
// Zawsze najpierw sprawdź błędy parsowania
const parseError = doc.querySelector('parsererror');
if (parseError) {
throw new Error('XML parse failed: ' + parseError.textContent);
}
console.log(doc.documentElement.tagName); // libraryJSON.parse(), który rzuca wyjątek,
DOMParser zwraca dokument zawierający element <parsererror>, gdy
parsowanie się nie powiedzie — nie rzuca wyjątku. Jeśli pominiesz sprawdzenie błędów, będziesz cicho operować
na niepoprawnie uformowanym dokumencie i uzyskasz mylące wyniki.Nawigacja po DOM — getElementsByTagName vs querySelector
Gdy masz już sparsowany dokument, masz do dyspozycji dwa główne API do znajdowania elementów. Oba działają, ale mają różne mocne strony:
// getElementsByTagName — zwraca żywą HTMLCollection
const books = doc.getElementsByTagName('book');
console.log(books.length); // 2
// querySelector / querySelectorAll — składnia selektorów CSS, zwraca NodeList
const firstTitle = doc.querySelector('title').textContent;
console.log(firstTitle); // The C Programming Language
// Pobierz wszystkie tytuły
const titles = [...doc.querySelectorAll('title')].map(el => el.textContent);
console.log(titles);
// ['The C Programming Language', 'The Pragmatic Programmer']
// Odczyt atrybutów
const firstBook = doc.querySelector('book');
const isbn = firstBook.getAttribute('isbn');
console.log(isbn); // 978-0-13-110362-7
// Odczyt atrybutu currency z elementu price
const priceEl = firstBook.querySelector('price');
console.log(priceEl.textContent); // 45.99
console.log(priceEl.getAttribute('currency')); // USDPreferuję querySelector do precyzyjnych wyszukiwań — składnia selektorów CSS
jest znajoma i zwięzła. Używaj getElementsByTagName, gdy potrzebujesz wszystkich elementów
o danym tagu i chcesz żywej kolekcji (choć w praktyce rozłożony NodeList jest zazwyczaj czystszy).
Wyodrębnianie danych strukturalnych — praktyczny wzorzec
Oto jak mapować dokument XML na czystą tablicę obiektów JavaScript — wzorzec, którego używasz przy konsumowaniu prawdziwej odpowiedzi API XML:
function parseLibraryXml(xmlString) {
const parser = new DOMParser();
const doc = parser.parseFromString(xmlString, 'application/xml');
if (doc.querySelector('parsererror')) {
throw new Error('Invalid XML');
}
return [...doc.querySelectorAll('book')].map(book => ({
isbn: book.getAttribute('isbn'),
title: book.querySelector('title').textContent.trim(),
authors: [...book.querySelectorAll('author')].map(a => a.textContent.trim()),
year: parseInt(book.querySelector('year').textContent, 10),
price: {
amount: parseFloat(book.querySelector('price').textContent),
currency: book.querySelector('price').getAttribute('currency')
}
}));
}
const books = parseLibraryXml(xmlString);
console.log(books[0].title); // The C Programming Language
console.log(books[0].authors); // ['Brian W. Kernighan', 'Dennis M. Ritchie']
console.log(books[0].price.amount); // 45.99Obsługa przestrzeni nazw XML
Przestrzenie nazw to miejsce, gdzie większość programistów napotyka mur. Odpowiedzi SOAP, kanały Atom
i SVG używają przestrzeni nazw XML — a naiwne querySelector('body') zwróci null na dokumencie SOAP,
bo element to w rzeczywistości soap:Body. Oto jak poprawnie to obsłużyć:
const soapResponse = `<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:m="http://www.example.com/orders">
<soap:Header/>
<soap:Body>
<m:GetOrderResponse>
<m:OrderId>ORD-5521</m:OrderId>
<m:Status>Shipped</m:Status>
<m:Total currency="EUR">289.50</m:Total>
</m:GetOrderResponse>
</soap:Body>
</soap:Envelope>`;
const parser = new DOMParser();
const doc = parser.parseFromString(soapResponse, 'application/xml');
// Opcja 1: getElementsByTagNameNS — jawny URI przestrzeni nazw
const SOAP_NS = 'http://schemas.xmlsoap.org/soap/envelope/';
const ORDER_NS = 'http://www.example.com/orders';
const body = doc.getElementsByTagNameNS(SOAP_NS, 'Body')[0];
const orderId = doc.getElementsByTagNameNS(ORDER_NS, 'OrderId')[0].textContent;
const status = doc.getElementsByTagNameNS(ORDER_NS, 'Status')[0].textContent;
console.log(orderId); // ORD-5521
console.log(status); // Shipped
// Opcja 2: XPath z resolverem przestrzeni nazw (bardziej elastyczne)
function nsResolver(prefix) {
const namespaces = {
soap: 'http://schemas.xmlsoap.org/soap/envelope/',
m: 'http://www.example.com/orders'
};
return namespaces[prefix] || null;
}
const xpathResult = doc.evaluate(
'//m:OrderId',
doc,
nsResolver,
XPathResult.STRING_TYPE,
null
);
console.log(xpathResult.stringValue); // ORD-5521Zapytania XPath z evaluate()
XPath to język zapytań do dokumentów XML. Przeglądarka udostępnia go przez
document.evaluate(). Jest bardziej wydajny niż selektory CSS dla XML — możesz
zapytać według wartości atrybutu, pozycji, zawartości tekstowej i powiązań hierarchicznych.
Zobacz dokumentację XPath na MDN
dla pełnej składni wyrażeń:
// Używamy dokumentu XML biblioteki z wcześniejszego przykładu
function xpath(doc, expression, contextNode = doc) {
const result = doc.evaluate(
expression,
contextNode,
null, // resolver przestrzeni nazw — null dla XML bez przestrzeni nazw
XPathResult.ANY_TYPE,
null
);
return result;
}
// Pobierz wszystkie tytuły książek
const titlesResult = xpath(doc, '//book/title');
const titles = [];
let node;
while ((node = titlesResult.iterateNext())) {
titles.push(node.textContent);
}
console.log(titles);
// ['The C Programming Language', 'The Pragmatic Programmer']
// Pobierz książkę o konkretnym ISBN
const bookResult = doc.evaluate(
'//book[@isbn="978-0-13-110362-7"]/title',
doc, null,
XPathResult.STRING_TYPE,
null
);
console.log(bookResult.stringValue); // The C Programming Language
// Pobierz książki droższe niż $50
const expensiveResult = xpath(doc, '//book[price > 50]/title');
let expensiveNode;
while ((expensiveNode = expensiveResult.iterateNext())) {
console.log(expensiveNode.textContent); // The Pragmatic Programmer
}Node.js — fast-xml-parser (najlepszy wybór)
Node.js nie ma DOMParser. Masz dwie opcje: użyć
wbudowanego
podejścia SAX opartego na strumieniach node:stream (uciążliwe) lub użyć
fast-xml-parser
(właściwy wybór dla większości zastosowań). Jest szybki, nie ma zależności i zwraca zwykłe obiekty JavaScript:
npm install fast-xml-parserimport { XMLParser } from 'fast-xml-parser';
const xmlString = `<?xml version="1.0"?>
<library>
<book isbn="978-0-13-110362-7">
<title>The C Programming Language</title>
<year>1988</year>
<price currency="USD">45.99</price>
</book>
<book isbn="978-0-201-63361-0">
<title>The Pragmatic Programmer</title>
<year>1999</year>
<price currency="USD">52.00</price>
</book>
</library>`;
const parser = new XMLParser({
ignoreAttributes: false, // uwzględnij atrybuty XML
attributeNamePrefix: '@_', // prefiks atrybutów, by odróżnić je od elementów
isArray: (tagName) => tagName === 'book' // zawsze traktuj <book> jako tablicę
});
const result = parser.parse(xmlString);
const books = result.library.book;
books.forEach(book => {
console.log(book.title); // The C Programming Language
console.log(book['@_isbn']); // 978-0-13-110362-7
console.log(book.price['#text']); // 45.99
console.log(book.price['@_currency']); // USD
});fast-xml-parser zwróci obiekt dla jednego
elementu i tablicę dla wielu. Opcja isArray wymusza spójne zachowanie tablicowe dla
nazwanych tagów — zawsze używaj jej dla elementów, które mogą się powtarzać.Obsługa błędów w Node.js
import { XMLParser, XMLValidator } from 'fast-xml-parser';
function parseXmlSafely(xmlString) {
// Najpierw zweryfikuj — zwraca true lub obiekt błędu
const validation = XMLValidator.validate(xmlString);
if (validation !== true) {
throw new Error(`Invalid XML: ${validation.err.msg} at line ${validation.err.line}`);
}
const parser = new XMLParser({ ignoreAttributes: false, attributeNamePrefix: '@_' });
return parser.parse(xmlString);
}
try {
const data = parseXmlSafely(xmlString);
console.log(data);
} catch (err) {
console.error('XML parsing failed:', err.message);
}Powiązane narzędzia
Podczas pracy z XML w projektach JavaScript: XML Formatter do czytelnego formatowania zminifikowanych odpowiedzi, XML Validator do sprawdzania poprawności składniowej przed parsowaniem, XML XPath Tester do eksperymentowania z zapytaniami XPath, oraz XML to JSON, jeśli chcesz przekonwertować do prostszej struktury.
Podsumowanie
W przeglądarce DOMParser z 'application/xml' to Twój podstawowy wybór —
pamiętaj tylko o sprawdzeniu parsererror. Dla przestrzeni nazw XML używaj
getElementsByTagNameNS lub XPath z resolverem przestrzeni nazw. W Node.js
fast-xml-parser daje Ci czyste obiekty JavaScript bez narzutu DOM.
Wzorce przedstawione tutaj pokrywają 95% prawdziwych scenariuszy parsowania XML — odpowiedzi SOAP,
kanały RSS, pliki konfiguracyjne i wiele więcej.