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:

Table of Content

Using DOM Parser
Using XPath
Using Regular Expressions
Using the attr() method in jQuery

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:

UsingDOMParser

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:

UsingRegEx

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.