How to Parse XML Data in JavaScript Using the DOM Parser?-JS Tutorial-php.cn

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

Patricia Arquette

Release： 2024-12-05 11:59:15

Original

690 people have browsed it

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>

Copy after login

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);
}

Copy after login

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

Copy after login

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

Copy after login

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!