How to Parse XML Data in JavaScript Using the DOM Parser?

Parse XML using JavaScript

Parsing XML using JavaScript involves converting XML data into a more manageable format for processing. To parse XML without external frameworks, we can utilize the Document Object Model (DOM) available in most modern browsers.

Consider the following XML stored in a string variable:

<address>
  <street>Roble Ave</street>
  <streetNumber>649</streetNumber>
  <lat>37.45127</lat>
  <lng>-122.18032</lng>
  <distance>0.04</distance>
  <postalcode>94025</postalcode>
  <placename>Menlo Park</placename>
  <adminCode2>081</adminCode2>
  <adminName2>San Mateo</adminName2>
  <adminCode1>CA</adminCode1>
  <adminName1>California</adminName1>
  <countryCode>US</countryCode>
</address>

To parse this XML using DOM, we can follow these steps:

if (window.DOMParser) {
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(txt, "text/xml");
} else { // Internet Explorer
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(txt);
}

Once the XML is parsed, we can retrieve specific values from the nodes:

// Gets house address number
console.log(xmlDoc.getElementsByTagName("streetNumber")[0].childNodes[0].nodeValue);

// Gets Street name
console.log(xmlDoc.getElementsByTagName("street")[0].childNodes[0].nodeValue);

// Gets Postal Code
console.log(xmlDoc.getElementsByTagName("postalcode")[0].childNodes[0].nodeValue);

Additionally, if the XML contains Namespace prefixes, the prefixes should not be included when requesting the namespace:

// XML with Namespace prefixes
txt = `

  Roble Ave
  649
  94025
`;

// Parse with Namespace prefixes
if (window.DOMParser) {
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(txt, "text/xml");
} else { // Internet Explorer
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(txt);
}

// Gets "streetNumber" (note there is no prefix of "sn")
console.log(xmlDoc.getElementsByTagName("streetNumber")[0].childNodes[0].nodeValue);

// Gets Street name
console.log(xmlDoc.getElementsByTagName("street")[0].childNodes[0].nodeValue);

// Gets Postal Code
console.log(xmlDoc.getElementsByTagName("postalcode")[0].childNodes[0].nodeValue);

The above is the detailed content of How to Parse XML Data in JavaScript Using the DOM Parser?. For more information, please follow other related articles on the PHP Chinese website!