XML DOM Get Values

Extracting data from XML elements and attributes

📥 What is Getting Values?

Getting values means extracting text content and attribute data from XML elements. You can retrieve element text, attribute values, and node data using simple DOM properties and methods. 


// Get element text
var text = element.childNodes[0].nodeValue;
// Get attribute value
var attr = element.getAttribute("id");

Value Extraction Methods

XML DOM provides multiple ways to extract data from your XML document. You can get text content from elements, retrieve attribute values, or access node values directly. Each method serves different purposes for data extraction.

📝

Node Value

Get text from text nodes 

node.nodeValue
🏷️

Get Attribute

Retrieve attribute values 

getAttribute()
📄

Text Content

Get all text inside element 

textContent
🎯

Child Nodes

Access child node values 

childNodes[0]

🔹 Sample XML Data

We'll use this XML for value extraction examples: 

<?xml version="1.0"?>
<library>
    <book id="B001" category="fiction">
        <title>The Great Adventure</title>
        <author>John Smith</author>
        <year>2023</year>
        <price currency="USD">24.99</price>
    </book>
    <book id="B002" category="science">
        <title>Space Exploration</title>
        <author>Jane Doe</author>
        <year>2024</year>
        <price currency="USD">29.99</price>
    </book>
</library>

🔹 Get Element Text Value

Extract text content from XML elements: 

// Get the first title element
var title = xmlDoc.getElementsByTagName("title")[0];

// Get the text value
var titleText = title.childNodes[0].nodeValue;
console.log("Title: " + titleText);

// Alternative using textContent
var titleText2 = title.textContent;
console.log("Title (alt): " + titleText2);

Output:

Title: The Great Adventure

Title (alt): The Great Adventure

🔹 Get Attribute Values

Retrieve attribute values using getAttribute(): 

// Get the first book element
var book = xmlDoc.getElementsByTagName("book")[0];

// Get attribute values
var bookId = book.getAttribute("id");
var category = book.getAttribute("category");

console.log("Book ID: " + bookId);
console.log("Category: " + category);

Output:

Book ID: B001

Category: fiction

🔹 Get Multiple Values

Extract multiple values from the same element: 

// Get first book
var book = xmlDoc.getElementsByTagName("book")[0];

// Get all child element values
var title = book.getElementsByTagName("title")[0].textContent;
var author = book.getElementsByTagName("author")[0].textContent;
var year = book.getElementsByTagName("year")[0].textContent;
var price = book.getElementsByTagName("price")[0].textContent;

console.log("Book: " + title);
console.log("By: " + author);
console.log("Year: " + year);
console.log("Price: $" + price);

Output:

Book: The Great Adventure

By: John Smith

Year: 2023

Price: $24.99

🔹 Get Values from All Elements

Loop through elements to get all values: 

// Get all book elements
var books = xmlDoc.getElementsByTagName("book");

// Loop through all books
for (var i = 0; i < books.length; i++) {
    var title = books[i].getElementsByTagName("title")[0].textContent;
    var author = books[i].getElementsByTagName("author")[0].textContent;
    
    console.log((i + 1) + ". " + title + " by " + author);
}

Output:

1. The Great Adventure by John Smith

2. Space Exploration by Jane Doe

🔹 Get Nested Attribute Values

Access attributes from nested elements: 

// Get first book
var book = xmlDoc.getElementsByTagName("book")[0];

// Get price element
var priceElement = book.getElementsByTagName("price")[0];

// Get price value and currency attribute
var price = priceElement.textContent;
var currency = priceElement.getAttribute("currency");

console.log("Price: " + price + " " + currency);

Output:

Price: 24.99 USD

🔹 Complete Get Values Example

Full example extracting various types of data: 

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xmlText = `<library>
    <book id="B001">
        <title>HTML Guide</title>
        <author>John Smith</author>
        <price currency="USD">24.99</price>
    </book>
</library>`;

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText, "text/xml");

// Get book element
var book = xmlDoc.getElementsByTagName("book")[0];

// Extract all data
var id = book.getAttribute("id");
var title = book.getElementsByTagName("title")[0].textContent;
var author = book.getElementsByTagName("author")[0].textContent;
var priceEl = book.getElementsByTagName("price")[0];
var price = priceEl.textContent;
var currency = priceEl.getAttribute("currency");

var output = "Book ID: " + id + "<br>";
output += "Title: " + title + "<br>";
output += "Author: " + author + "<br>";
output += "Price: " + price + " " + currency;

document.getElementById("demo").innerHTML = output;
</script>

</body>
</html>

Output:

Book ID: B001

Title: HTML Guide

Author: John Smith

Price: 24.99 USD

🧠 Test Your Knowledge

Which method gets an attribute value from an element?