-
XML Tutorial
- XML HOME
- XML Introduction
- XML How to use
- XML Tree
- XML Syntax
- XML Elements
- XML Attributes
- XML Namespaces
- XML Display
- XML HttpRequest
- XML Parser
- XML DOM
- XML XPath
- XML XSLT
- XML XQuery
- XML XLink
- XML Validator
- XML DTD
- XML Schema
- XML Server
- XML Quiz
- XML Certificate
XML AJAX
- AJAX Introduction
- AJAX XMLHttp
- AJAX Request
- AJAX Response
- AJAX XML File
- AJAX PHP
- AJAX ASP
- AJAX Database
- AJAX Applications
- AJAX Examples
XML DOM
- DOM Introduction
- DOM Nodes
- DOM Accessing
- DOM Node Info
- DOM Node List
- DOM Traversing
- DOM Navigating
- DOM Get Values
- DOM Change Nodes
- DOM Remove Nodes
- DOM Replace Nodes
- DOM Create Nodes
- DOM Add Nodes
- DOM Clone Nodes
XPath Tutorial
XSLT Tutorial
- XSLT Introduction
- XSL Languages
- XSLT Transform
- XSLT <template>
- XSLT <value-of>
- XSLT <for-each>
- XSLT <sort>
- XSLT <if>
- XSLT <choose>
- XSLT Apply
- XSLT on the Client
- XSLT on the Server
- XSLT Edit XML
- XSLT Examples
XQuery Tutorial
- XQuery Introduction
- XQuery Example
- XQuery FLWOR
- XQuery HTML
- XQuery Terms
- XQuery Syntax
- XQuery Add
- XQuery Select
- XQuery Functions
XML DTD
- DTD Introduction
- DTD Building Blocks
- DTD Elements
- DTD Attributes
- DTD Elements vs Attr
- DTD Entities
- DTD Examples
XSD Schema
- XSD Introduction
- XSD How To
- XSD <schema>
- XSD Elements
- XSD Attributes
- XSD Restrictions
- XSD Complex Elements
- XSD Empty
- XSD Elements-only
- XSD Text-only
- XSD Mixed
- XSD Indicators
- XSD <any>
- XSD <anyAttribute>
- XSD Substitution
- XSD Example
XSD Data Types
Web Services
References
XML DOM - Navigate Nodes
Nodes can be navigated using node relationships
Navigating DOM Nodes
Accessing nodes in the node tree via the relationship between nodes, is often called "navigating nodes".
In the XML DOM, node relationships are defined as properties to the nodes:
The following image illustrates a part of the node tree and the relationship between nodes in books.xml:
DOM - Parent Node
All nodes have exactly one parent node. 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;
}
Example explained:
Avoid Empty Text Nodes
Some browsers might treat empty white-spaces or new lines as text nodes. This causes a problem when using the properties: firstChild, lastChild, nextSibling, previousSibling.
To avoid navigating to empty text nodes (spaces and new-line characters between element nodes), we use a function that checks the node type:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType != 1)
{
y = y.nextSibling;
}
return y;
}
The function above allows you to use get_nextSibling(node) instead of the property node.nextSibling.
Code explained:
Element nodes are type 1. If the sibling node is not an element node, it moves to the next nodes 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>
Output:
title
Example explained:
More Examples
Use the lastChild() method and a custom function to get the last child node of a node.
Use the nextSibling() method and a custom function to get the next sibling node of a node.
Use the previousSibling() method and a custom function to get the previous sibling node of a node.