How to get Attribute Value from XML using JavaScript?
Last Updated :
15 May, 2024
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:
Using DOM Parser
In this approach, define an XML string that represents a bookstore with a book element containing a category attribute followed by creating a new XML document using the parseFromString method of DOMParser. Use getElementsByTagName to locate the book element and then getAttribute to extract the value of the category attribute. Lastly, log into the console the value of the category attribute which happens to be "fiction".
Syntax:
let xmlDoc = new DOMParser().parseFromString(xmlString, "text/xml");
Example: The example below shows how to get attribute value from XML with JavaScript using DOM Parser.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using DOM Parser</title>
</head>
<body>
<h2>Using DOM Parser</h2>
<script>
let xmlString =
"<bookstore><book category='fiction'>Harry Potter</book></bookstore>";
let xmlDoc = new DOMParser()
.parseFromString(xmlString,
"text/xml");
let category = xmlDoc.
getElementsByTagName("book")[0]
.getAttribute("category");
console.log(category);
</script>
</body>
</html>
Output:
Using XPath
XPath is a query language that is used for choosing nodes from XML documents. Define an XML string to represent a bookstore with a book element having a category attribute. Locate the category of the book element after parsing this XML string using XPath. Then evaluate the expression with the evaluate method which selects the category attribute of a book. It then retrieves the result using stringValue and logs its value to the console that is "magic".
Syntax:
let attributeValue = xmlDoc.evaluate("/path/to/tag/@attribute", xmlDoc, null, XPathResult.STRING_TYPE, null).stringValue;Example: The example below shows how to get attribute value from XML with Java Script using XPath.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using XPath</title>
</head>
<body>
<h2>Using XPath</h2>
<script>
let xmlString =
"<bookstore><book category='magic'>Harry Potter</book></bookstore>";
let xmlDoc = new DOMParser()
.parseFromString(xmlString, "text/xml");
let category = xmlDoc.evaluate("/bookstore/book/@category",
xmlDoc, null,
XPathResult.STRING_TYPE,
null).stringValue;
console.log(category);
</script>
</body>
</html>
Output:
Using Regular Expressions
In this approach, the pattern /<book category=['"](.*?)['"]/ encloses value inside the category attribute. Then use the regex method to search through XML text. It will then store the matched result in a variable called match and extract the captured group (i.e. attribute value) as match[1]. Lastly, we output the category attribute value to the console which is "story" here.
Syntax:
let regex = /<tag attribute="(.*?)"/;
let match = xmlString.match(regex);
let attributeValue = match[1];
Example: The example below shows how to get attribute value from XML with JavaScript using Regular Expressions.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using RegEX</title>
</head>
<body>
<h2>Using RegEX</h2>
<script>
let xmlString =
"<book category='story'>Harry Potter</book>";
let regex = /<book category=['"](.*?)['"]/;
let match = xmlString.match(regex);
let category = match[1];
console.log(category);
</script>
</body>
</html>
Output:
Using the attr() method in jQuery
In this approach, The jQuery method attr() retrieves the value of an attribute for the first matched element, offering easy access to attribute values from HTML elements. Using $.parseXML(xmlString), the XML string is parsed into an XML document, then converted into a jQuery object with $(xmlDoc), enabling the use of jQuery methods. The .find("book") locates the <book> element in the XML, and .attr("category") retrieves the value of its category attribute.
Syntax:
let categoryValue = $(yourXml).find("book").attr("category");Example: The example below shows how to get attribute value from XML with JavaScript using the attr() method in jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Uing attr()</title>
</head>
<body>
<h2>Using JQuery attr()</h2>
<script src=
"https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let xmlString =
"<bookstore><book category='fiction'>Harry Potter</book></bookstore>";
let xmlDoc = $.parseXML(xmlString);
let $xml = $(xmlDoc);
let categoryValue = $xml.find("book").attr("category");
console.log(categoryValue);
</script>
</body>
</html>
Output:
Similar Reads
How To Set Custom Attribute Using JavaScript?
In modern web development manipulating HTML elements dynamically is a common requirement. One such task is setting custom attributes on elements to store additional data or metadata. Custom attributes referred to as data attributes allow developers to attach extra information to elements. In this ar
2 min read
How to Get Value by Class Name using JavaScript ?
This article will show you how to use JavaScript to get value by class name. To get the value of an element by its class name in JavaScript, you can use the getElementsByClassName() method. This method returns an array-like object of all elements with the specified class name. You can then access th
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
How to set attribute without value using jQuery ?
There are many ways to set attributes without value using jQuery. jQuery prop() method is used to get or set the values of attributes. To change the properties like checked, default checked, disabled, selectedIndex, default selected and selected state of Document Object Model, use the jQuery .prop()
2 min read
How to get an attribute value from a href link in Selenium java?
When working with Selenium WebDriver in Java, automating web interactions often involves handling hyperlinks. A common task is to extract the attribute value from a <a> tag, specifically the href attribute, which contains the link's destination URL. Extracting this href value allows you to ver
3 min read
How to Access XML Data via 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 accessing XML data using JavaScript which are as follows: Tab
2 min read
JavaScript - How to Get the Data Attributes of an Element?
Here are the various methods to get the data attributes of an element using JavaScript1. Using dataset PropertyThe dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data
2 min read
How to Get Selected Value in Dropdown List using JavaScript?
A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript.Basic HTML Structure for
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 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