Locate Nodes in XML DOM

Nodes can be located by using the relationships between nodes.

Position DOM Nodes

Nodes in the node tree can be accessed through node relationships, which is usually called 'node positioning' (or navigating nodes, navigating nodes).

In the XML DOM, node relationships are defined as node properties:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

The following figure shows books.xml is a part of the node tree and explains the relationships between nodes:

DOM Node Tree

DOM - Parent Node

All nodes have only one parent. The following code navigates to the parent node of <book>:

Example

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

Try it yourself

Example explanation:

  1. To books.xml loaded to xmlDoc in
  2. Get the first <book> element
  3. Output the node name of the parent node of "x"

Avoid empty text nodes

Some browsers may treat whitespace or newline characters as text nodes. This can cause issues when using the following properties:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

To avoid navigating to empty text nodes (spaces and newline characters between element nodes), we use a function to check the type of the node:

function get_nextSibling(n) {}}
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

With the above function, we can use get_nextSibling(node) to replace the node.nextSibling property.

Code explanation:

The type of the element node is 1. If the sibling node at the same level is not an element node, move to the next node until an element node is found.

Get the first child element

The following code displays the first element node of the first <book>:

Example

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
    document.getElementById("demo").innerHTML = x.nodeName;
}
// Check if the first node is an element node
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Try it yourself

Example explanation:

  1. To books.xml Loaded into xmlDoc
  2. Use the get_firstChild function on the first <book> element node to get the first child element node
  3. Output the node name of the first child element node

More examples

lastChild()
Use the lastChild() method and custom function to get the last child node of an element.
nextSibling()
Use the nextSibling() method and custom functions to get the next sibling node of an element.
previousSibling()
Use the previousSibling() method and custom functions to get the previous sibling node of an element.