XML DOM
The XML DOM is the tree of objects a parser builds from a document, and it's the standard interface programs use to read, search, and change XML data.
The Document as a Tree of Nodes
Once an XML document is parsed, it exists in memory as a hierarchy of node objects. The root element is a node, every child element is a node, every attribute is a node, and every piece of text between tags is a node too. This uniform node-based model — the Document Object Model, or DOM — is what lets the same small set of methods and properties work no matter how deep or how differently shaped a document is.
Each node has relationships to the nodes around it: a parentNode, a list of childNodes, a firstChild, a lastChild, and nextSibling / previousSibling pointers. These relationships are how code walks a document without knowing its exact shape in advance.
Finding Elements
The most common way to locate elements is getElementsByTagName(), which returns a live, array-like collection of every descendant element with the given tag name, regardless of how deeply nested it is. It can be called on the whole document or on a specific element to search only within that element's descendants.
Locating all elements with a given tag name and reading their text.
Using getElementsByTagName
<!DOCTYPE html>
<html>
<body>
<script>
const xmlDoc = new DOMParser().parseFromString(`
<library>
<book><title>XML Basics</title></book>
<book><title>DOM Deep Dive</title></book>
</library>`, "text/xml");
const titles = xmlDoc.getElementsByTagName("title");
for (let i = 0; i < titles.length; i++) {
console.log(titles[i].childNodes[0].nodeValue);
}
// "XML Basics"
// "DOM Deep Dive"
</script>
</body>
</html>Reading Node Values
An element node itself does not directly hold its text — the text is a separate child text node underneath it. That's why code commonly reaches one level deeper, into childNodes[0].nodeValue or the simpler textContent property, to retrieve the readable content of an element.
Comparing nodeValue access versus the simpler textContent shortcut.
nodeValue vs. textContent
<!DOCTYPE html>
<html>
<body>
<script>
const xmlDoc = new DOMParser().parseFromString(`
<library>
<book><title>XML Basics</title></book>
<book><title>DOM Deep Dive</title></book>
</library>`, "text/xml");
const title = xmlDoc.getElementsByTagName("title")[0];
console.log(title.nodeValue); // null (elements have no direct value)
console.log(title.childNodes[0].nodeValue); // "XML Basics"
console.log(title.textContent); // "XML Basics" (shortcut, same result)
</script>
</body>
</html>Traversing a document manually using parent/child/sibling relationships.
Manual tree traversal
<!DOCTYPE html>
<html>
<body>
<script>
const xmlDoc = new DOMParser().parseFromString(`
<library>
<book><title>XML Basics</title></book>
<book><title>DOM Deep Dive</title></book>
</library>`, "text/xml");
const root = xmlDoc.documentElement; // <library>
let firstBook = root.getElementsByTagName("book")[0];
console.log(firstBook.parentNode.nodeName); // "library"
console.log(firstBook.nextSibling === null); // depends on whitespace text nodes
console.log(firstBook.firstChild.nodeName); // "title"
</script>
</body>
</html>Exercise: XML DOM
What does the XML DOM define?
