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 get the data attributes of an element using JavaScript ?
Here are the various methods to get the data attributes of an element using JavaScript 1. 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 dat
2 min read
How to sort element by numerical value of data attribute using JavaScript ?
The task is to sort numeric data attributes, there are many ways to sort the HTML elements by the numerical value of data attributes with the help of JavaScript. In this article, we will explain popular and less time-consuming ones. Examples of Sort Elements by Numerical ValueExample 1: Using Datase
2 min read
How to get value of selected radio button using JavaScript ?
To get the value of the selected radio button, a user-defined function can be created that gets all the radio buttons with the name attribute and finds the radio button selected using the checked property. The checked property returns True if the radio button is selected and False otherwise. If ther
2 min read
How to get the month name from Date using JavaScript ?
The purpose of this article is to get the month name from a particular date using JavaScript getMonth() method. This method is used to fetch the month(0 to 11) from the given Date object. It returns an integer value ranging from (0 to 11) Zero (0) means January, 1 means February, and so on, till 11
1 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()
3 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 set/get the value of Progress Bar using JavaScript ?
In this article, we are creating the progress bar of a task by using a <progress> tag. The <progress> tag is used to represent the progress of a task. It is also defined how much work is done and how much is left to download a thing. It is not used to represent the disk space or relevant
2 min read