Varje SOAP-tjänst du har arbetat med, varje RSS-flöde du har konsumerat, varje SVG du har manipulerat — allt är XML. JavaScript har två inbyggda sätt att tolka det i webbläsaren och ett solid npm-bibliotek för Node.js. Den knepiga delen är inte själva tolkningen; det är att navigera i det resulterande DOM:t, hantera namnrymder och undvika de fallgropar som fångar alla första gången. Låt oss gå igenom de verkliga mönstren.
DOMParser — Tolka XML i webbläsaren
Webbläsarens inbyggda
DOMParser-API
konverterar en XML-sträng till ett DOM-dokument. Använd MIME-typen 'application/xml'
(inte 'text/html') så att tolkaren tillämpar strikta XML-regler:
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');
// Kontrollera alltid tolkningsfel först
const parseError = doc.querySelector('parsererror');
if (parseError) {
throw new Error('XML parse failed: ' + parseError.textContent);
}
console.log(doc.documentElement.tagName); // libraryJSON.parse() som kastar ett undantag
returnerar DOMParser ett dokument som innehåller ett <parsererror>-element när
tolkningen misslyckas — det kastar inget undantag. Om du hoppar över felkontrollen opererar du tyst på
ett felformat dokument och får förvirrande resultat längre fram.Navigera i DOM — getElementsByTagName vs querySelector
När du har ett tolkat dokument har du två huvud-API:er för att hitta element. Båda fungerar men har olika styrkor:
// getElementsByTagName — returnerar en levande HTMLCollection
const books = doc.getElementsByTagName('book');
console.log(books.length); // 2
// querySelector / querySelectorAll — CSS-selektorsyntax, returnerar NodeList
const firstTitle = doc.querySelector('title').textContent;
console.log(firstTitle); // The C Programming Language
// Hämta alla titlar
const titles = [...doc.querySelectorAll('title')].map(el => el.textContent);
console.log(titles);
// ['The C Programming Language', 'The Pragmatic Programmer']
// Läsa attribut
const firstBook = doc.querySelector('book');
const isbn = firstBook.getAttribute('isbn');
console.log(isbn); // 978-0-13-110362-7
// Läsa currency-attributet från price
const priceEl = firstBook.querySelector('price');
console.log(priceEl.textContent); // 45.99
console.log(priceEl.getAttribute('currency')); // USDJag föredrar querySelector för riktade sökningar — CSS-selektorsyntaxen är
bekant och koncis. Använd getElementsByTagName när du behöver alla element med en
given tagg och vill ha en levande samling (men i praktiken är en utspridd NodeList vanligtvis renare).
Extrahera strukturerad data — ett praktiskt mönster
Så här mappar du ett XML-dokument till en ren JavaScript-array av objekt — mönstret du använder när du konsumerar ett riktigt XML API-svar:
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.99Hantera XML med namnrymder
Namnrymder är där de flesta utvecklare stöter på en vägg. SOAP-svar, Atom-flöden och SVG använder alla
XML-namnrymder — och ett naivt querySelector('body') returnerar null på ett SOAP-dokument
eftersom elementet faktiskt är soap:Body. Så här hanterar du det korrekt:
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');
// Alternativ 1: getElementsByTagNameNS — explicit namnrymds-URI
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
// Alternativ 2: XPath med namnrymdsupplösare (mer flexibelt)
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-5521XPath-frågor med evaluate()
XPath är ett frågespråk för XML-dokument. Webbläsaren exponerar det via
document.evaluate(). Det är mer kraftfullt än CSS-selektorer för XML — du kan
fråga efter attributvärde, position, textinnehåll och härkomst.
Se MDN XPath-dokumentationen
för fullständig uttryckssyntax:
// Använder vårt biblioteks-XML-dokument från tidigare
function xpath(doc, expression, contextNode = doc) {
const result = doc.evaluate(
expression,
contextNode,
null, // namnrymdsupplösare — null för XML utan namnrymder
XPathResult.ANY_TYPE,
null
);
return result;
}
// Hämta alla boktitlar
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']
// Hämta boken med ett specifikt 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
// Hämta böcker som kostar över $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 (det bästa alternativet)
Node.js har ingen DOMParser. Du har två alternativ: använda det
inbyggda
SAX-baserade strömningsalternativet med node:stream (besvärligt), eller använda
fast-xml-parser
(rätt val för de flesta användningsfall). Det är snabbt, utan beroenden och returnerar vanliga JavaScript-objekt:
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, // inkludera XML-attribut
attributeNamePrefix: '@_', // prefixattribut för att skilja från element
isArray: (tagName) => tagName === 'book' // behandla alltid <book> som en array
});
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 dig ett
objekt för ett objekt och en array för många. Alternativet isArray tvingar fram konsekvent
arraybeteende för namngivna taggar — använd det alltid för element du vet kan upprepas.Felhantering i Node.js
import { XMLParser, XMLValidator } from 'fast-xml-parser';
function parseXmlSafely(xmlString) {
// Validera först — returnerar true eller ett felobjekt
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);
}Relaterade verktyg
När du arbetar med XML i JavaScript-projekt: XML Formatter för att snyggt formatera minifierade svar, XML Validator för att kontrollera välformning innan tolkning, XML XPath Tester för att experimentera med XPath-frågor, och XML to JSON om du vill konvertera till en enklare struktur.
Sammanfattning
I webbläsaren är DOMParser med 'application/xml' ditt förstahandsval —
kom bara ihåg att kontrollera parsererror. För XML med namnrymder, använd
getElementsByTagNameNS eller XPath med en namnrymdsupplösare. I Node.js ger
fast-xml-parser dig rena JavaScript-objekt utan DOM-overhead.
Mönstren här täcker 95% av verkliga XML-tolkningsscenarier — SOAP-svar, RSS-flöden,
konfigurationsfiler och mer.