XML DOM Nodes

The Document Object Model (DOM) represents an XML document as a tree of objects in memory. When a parser loads an XML file into the DOM, every part of the document — every element, attribute, text, comment — becomes a node object. Programs interact with the XML by reading and modifying these node objects.

Think of the DOM like a blueprint of a building turned into a physical model. The blueprint (XML file) describes the structure. The physical model (DOM) is an actual object you can touch, move parts around, add rooms, or remove walls — all in memory, without touching the original blueprint.

DOM Node Types and Their Constants

DOM Tree from XML

XML Source

<bookstore>
  <book id="B001">
    <title>XML Basics</title>
    <price>350</price>
  </book>
  <book id="B002">
    <title>XSLT Guide</title>
    <price>420</price>
  </book>
</bookstore>

DOM Tree Representation

Document Node
    |
    +-- Element: bookstore
          |
          +-- Text: "\n  " (whitespace)
          |
          +-- Element: book
          |     |
          |     +-- Attribute: id = "B001"
          |     +-- Text: "\n    "
          |     +-- Element: title
          |     |     +-- Text: "XML Basics"
          |     +-- Text: "\n    "
          |     +-- Element: price
          |           +-- Text: "350"
          |
          +-- Text: "\n  "
          |
          +-- Element: book
                |
                +-- Attribute: id = "B002"
                +-- Element: title
                |     +-- Text: "XSLT Guide"
                +-- Element: price
                      +-- Text: "420"

Key DOM Node Properties

Every node object in the DOM exposes these properties:

Navigating Nodes in JavaScript

// Parse XML from a string
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// Get the root element
var root = xmlDoc.documentElement;
console.log(root.nodeName);          // "bookstore"

// Get all book elements
var books = xmlDoc.getElementsByTagName("book");
console.log(books.length);           // 2

// Access first book
var firstBook = books[0];
console.log(firstBook.nodeName);     // "book"
console.log(firstBook.nodeType);     // 1 (element)

// Access attribute
var id = firstBook.getAttribute("id");
console.log(id);                     // "B001"

// Access child element
var title = firstBook.getElementsByTagName("title")[0];
console.log(title.textContent);      // "XML Basics"

nodeName Values by Node Type

nodeValue by Node Type

Checking Node Type with nodeType

function describeNode(node) {
  if (node.nodeType === 1) {
    return "Element: " + node.nodeName;
  } else if (node.nodeType === 3) {
    return "Text: " + node.nodeValue;
  } else if (node.nodeType === 8) {
    return "Comment: " + node.nodeValue;
  } else {
    return "Other node type: " + node.nodeType;
  }
}

Key Points to Remember

• The DOM represents an XML document as a tree of node objects in memory.
• Element nodes have nodeType = 1; text nodes have nodeType = 3.
• nodeName gives the element name or special name (#text, #comment, #document).
• nodeValue is null for elements but holds the actual value for text and attribute nodes.
• childNodes, firstChild, lastChild, nextSibling, and previousSibling navigate the tree.
• Whitespace between elements creates text nodes in the DOM.
• Use nodeType to safely check what kind of node you are working with before reading its value.