XML DOM – Get Node Values

Welcome to The Coding College! In this tutorial, we will focus on how to get node values from an XML document using the XML DOM (Document Object Model). Extracting the values of nodes is an essential part of working with XML data, enabling you to process and manipulate structured information effectively.

Understanding Node Values

In an XML document, a node value refers to the text content inside an element or attribute. Using XML DOM, you can retrieve these values in various ways depending on the type of node you are working with.

Types of Node Values

Node TypeDescriptionValue Accessed By
Element NodesRepresents XML elements (e.g., <title> or <author>).textContent or nodeValue of childNodes
Attribute NodesRepresents attributes within elements (e.g., id="1").getAttribute()
Text NodesContains the text value inside an element.nodeValue or textContent

Example XML Document

Here is an example XML document we’ll work with in this tutorial:

<library>
  <book id="1">
    <title>XML Basics</title>
    <author>John Doe</author>
  </book>
  <book id="2">
    <title>JavaScript Essentials</title>
    <author>Jane Smith</author>
  </book>
</library>

Parsing XML

To retrieve values, first, parse the XML string into a DOM object:

const parser = new DOMParser();
const xmlString = `
  <library>
    <book id="1">
      <title>XML Basics</title>
      <author>John Doe</author>
    </book>
    <book id="2">
      <title>JavaScript Essentials</title>
      <author>Jane Smith</author>
    </book>
  </library>
`;
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const rootNode = xmlDoc.documentElement; // The root <library> element

1. Getting Element Node Values

To get the value of an XML element, you can use the textContent property or traverse the childNodes to retrieve the text node.

Example: Retrieving title and author Values

const books = xmlDoc.getElementsByTagName("book");
for (let i = 0; i < books.length; i++) {
  const title = books[i].getElementsByTagName("title")[0].textContent;
  const author = books[i].getElementsByTagName("author")[0].textContent;
  console.log(`Title: ${title}, Author: ${author}`);
}

Output:

Title: XML Basics, Author: John Doe  
Title: JavaScript Essentials, Author: Jane Smith

2. Getting Attribute Node Values

Attributes are part of element nodes and can be accessed using the getAttribute() method.

Example: Retrieving the id Attribute

for (let i = 0; i < books.length; i++) {
  const bookId = books[i].getAttribute("id");
  console.log(`Book ID: ${bookId}`);
}

Output:

Book ID: 1  
Book ID: 2

3. Using nodeValue to Get Text Node Values

The nodeValue property retrieves the value of text nodes directly.

Example: Using nodeValue

const titles = xmlDoc.getElementsByTagName("title");
for (let i = 0; i < titles.length; i++) {
  const titleValue = titles[i].childNodes[0].nodeValue;
  console.log(`Title: ${titleValue}`);
}

Output:

Title: XML Basics  
Title: JavaScript Essentials

4. Handling Mixed Content

If an XML element contains both text and nested elements, use textContent carefully. For mixed content, extract the text nodes separately.

Example XML with Mixed Content:

<note>
  Remember to read
  <highlight>XML Basics</highlight>
  today.
</note>

Example: Extracting Text Nodes Only

const note = `
<note>
  Remember to read
  <highlight>XML Basics</highlight>
  today.
</note>
`;
const mixedXmlDoc = parser.parseFromString(note, "application/xml");
const noteElement = mixedXmlDoc.getElementsByTagName("note")[0];

// Extract only text nodes
const childNodes = noteElement.childNodes;
for (let i = 0; i < childNodes.length; i++) {
  if (childNodes[i].nodeType === 3) { // Text Node
    console.log(childNodes[i].nodeValue.trim());
  }
}

Output:

Remember to read  
today.

5. Combining Element and Attribute Values

You can combine values from elements and attributes to display comprehensive data.

Example:

for (let i = 0; i < books.length; i++) {
  const bookId = books[i].getAttribute("id");
  const title = books[i].getElementsByTagName("title")[0].textContent;
  const author = books[i].getElementsByTagName("author")[0].textContent;
  console.log(`Book ID: ${bookId}, Title: ${title}, Author: ${author}`);
}

Output:

Book ID: 1, Title: XML Basics, Author: John Doe  
Book ID: 2, Title: JavaScript Essentials, Author: Jane Smith

Node Types in XML DOM

When working with node values, understanding node types helps differentiate between elements, attributes, and text nodes.

Node TypeValueDescription
Element Node1Represents an element.
Attribute Node2Represents an attribute.
Text Node3Represents text content inside an element.

You can check a node’s type using the nodeType property.

Example:

const nodeType = books[0].nodeType;
console.log(`Node Type: ${nodeType}`); // Output: 1 (Element Node)

Conclusion

Retrieving node values in an XML document is a fundamental task when working with XML. By using properties like textContent, nodeValue, and methods like getAttribute(), you can effectively extract both element and attribute values for further processing.

Leave a Comment