How to Access XML Data via JavaScript ? Last Updated : 02 May, 2024 Comments Improve Suggest changes Like Article Like Report XML stands for Extensible Markup Language. It is a popular format for storing and exchanging data on the web. It provides a structured way to represent data that is both human-readable and machine-readable. There are various approaches to accessing XML data using JavaScript which are as follows: Table of Content Using DOM ParserUsing XMLHttpRequestUsing DOM ParserDocument Object Model (DOM) Parser in JavaScript provides a way to parse XML or HTML documents into a tree-like structure. Example: To demonstrate accessing XML data via JavaScript DOM parser. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Using DOM Parser</title> </head> <body> <script> // Sample XML data const xmlString = ` <root> <person> <name>John</name> <age>30</age> </person> <person> <name>Alice</name> <age>25</age> </person> </root>`; // Create a new DOMParser const parser = new DOMParser(); // Parse the XML string const xmlDoc = parser .parseFromString(xmlString, "text/xml"); // Access elements using DOM methods const persons = xmlDoc .getElementsByTagName("person"); // Loop through elements for (let i = 0; i < persons.length; i++) { let name = persons[i] .getElementsByTagName("name")[0] .childNodes[0] .nodeValue; let age = persons[i] .getElementsByTagName("age")[0] .childNodes[0] .nodeValue; console.log("Name:", name, "Age:", age); } </script> </body> </html> Output:Name: John Age: 30Name: Alice Age: 25Using XMLHttpRequestXMLHttpRequest is a built-in JavaScript object used to make HTTP requests to server-side resources. It can be used to fetch XML data from a server asynchronously. Example: To demonstrate accessing XML data using XMLHttp request. //data.xml<bookstore> <book> <title>Database</title> <author>abc</author> </book> <book> <title>Data Structure</title> <author>xyz</author> </book></bookstore>Example: To demonstrate fetching XML data from the server using the XMLhttps request. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Using XMLHttpRequest</title> </head> <body> <script> const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this .readyState == 4 && this.status == 200) { let xmlDoc = this.responseXML; let titles = xmlDoc .getElementsByTagName("title"); let author = xmlDoc .getElementsByTagName("author"); for (var i = 0; i < titles.length; i++) { console.log(`${titles[i] .childNodes[0] .nodeValue} Book is written by ${author[i] .childNodes[0] .nodeValue} `); } } }; xhttp.open("GET", "data.xml", true); xhttp.send(); </script> </body> </html> XML <!-- Save this file in same root folder as data.xml file --> <bookstore> <book> <title>Database</title> <author>abc</author> </book> <book> <title>Data Structure</title> <author>xyz</author> </book> </bookstore> Output:Database Book is written by abc Data Structure Book is written by xyz Comment More infoAdvertise with us Next Article How to Access XML Data via JavaScript ? jaimin78 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to Create XML in JavaScript ? In JavaScript, XML documents can be created using various approaches. You can define elements, attributes, and content to structure the XML data, and then serialize it into a string for use or storage. There are several approaches to creating XML in JavaScript which are as follows: Table of Content 2 min read How to create XML Dynamically using JavaScript? XML stands for Extensible Markup Language. It is a popular format for storing and exchanging data on the web. It provides a structured way to represent data that is both human-readable and machine-readable. There are various approaches to create XML Dynamically using JavaScript: Table of Content Usi 2 min read JavaScript- Read CDATA in XML CDATA sections in XML are used to include text that shouldn't be parsed by the XML parser, such as special characters or reserved words. You can read CDATA content in JavaScript by parsing the XML and accessing the content. Parse XML and Read CDATAIn this method, we parse an XML string using the DOM 2 min read How to Validate XML against XSD in JavaScript ? XML (Extensible Markup Language) is a widely used format for storing and exchanging structured data. XSD (XML Schema Definition) is a schema language used to define the structure, content, and data types of XML documents. Validating XML against XSD ensures that the XML document conforms to the speci 4 min read How to Validate XML in JavaScript ? Validation of XML is important for ensuring data integrity and adherence to XML standards in JavaScript. There are various approaches available in JavaScript using which validation of the XML can be done which are described as follows: Table of Content Using DOM ParserUsing Tag MatchingUsing DOM Par 2 min read How to Fetch XML with Fetch API in JavaScript ? The JavaScript fetch() method retrieves resources from a server and produces a Promise. We will see how to fetch XML data with JavaScript's Fetch API, parse responses into XML documents, and utilize DOM manipulation for streamlined data extraction with different methods. These are the following meth 3 min read How to Convert XML to JSON in JavaScript? To convert XML to JSON in JavaScript, various methods and libraries and be used. Here, we use xml-js library that provides xml2json function to convert XML to JSON data. It takes XML data as input and gives the JSON objects as output. We can also use the DOMParser from the xmldom package to convert 2 min read How to Load XML from JavaScript ? Loading XML data into JavaScript is a common task, whether it's for parsing user input or fetching data from a server. The below-listed approaches can be used to load XML from JavaScript. Table of Content Parsing XML String DirectlyFetching XML Data from an External SourceParsing XML in Node.js usin 4 min read How to get Attribute Value from XML using JavaScript? To get the attribute values from XML in JavaScript, We can use DOM manipulation or XPath querying and even use regular expressions to efficiently retrieve attribute values from XML documents. Below are the approaches to get attribute value from XML with Java Script: Table of Content Using DOM Parser 3 min read How are DOM utilized in JavaScript ? What is DOM The document object Model (DOM) represents the full HTML document. When an HTML document is loaded within the browser, it becomes a document object. The root element represents the HTML document, its properties, and its methods. With the assistance of a document object, we will add dynam 3 min read Like