W3Schools

home HOME

XML DOM Tutorial
DOM HOME
DOM Introduction
DOM Nodes
DOM Node Tree
DOM Parsing
DOM Load Function
DOM Methods
DOM Accessing
DOM Node Info
DOM Node List
DOM Traversing
DOM Browsers
DOM Navigating

Manipulate Nodes
DOM Get Values
DOM Change Nodes
DOM Remove Nodes
DOM Replace Nodes
DOM Create Nodes
DOM Add Nodes
DOM Clone Nodes
DOM HttpRequest

XML DOM Reference
DOM Node Types
DOM Node
DOM NodeList
DOM NamedNodeMap
DOM Document
DOM DocumentImpl
DOM DocumentType
DOM ProcessingInstr
DOM Element
DOM Attribute
DOM Text
DOM CDATA
DOM Comment
DOM HttpRequest
DOM ParseError Obj
DOM Parser Errors

DOM Summary

Examples
DOM Examples
DOM Validator

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Forum

Helping W3Schools

XML DOM - Navigating Nodes

prev next

Nodes can be navigated using node relationships.


Examples

The examples below use the XML file books.xml.
A function, loadXMLDoc(), in an external JavaScript is used to load the XML file.

Get the parent of a node
This example uses the parentNode property to get the parent of a node

Get the first child element of a node
This example uses the firstChild() method and a custom function to get the first child node of a node


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:

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

The following image illustrates a part of the node tree and the relationship between nodes in books.xml:

Node tree


DOM - Parent Node

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

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);

Example explained:

  1. Load "books.xml" into xmlDoc using loadXMLDoc()
  2. Get the first <book> element
  3. Output the node name of the parent node of "x"

Try it yourself


Avoid Empty Text Nodes

Firefox, and some other browsers, will treat empty white-spaces or new lines as text nodes, Internet Explorer will not.

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)
{
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. This way, the result will be the same in both Internet Explorer and Firefox.


Get the First Child Element

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

<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
<script type="text/javascript">
//check if the first node is an element node
function get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}
</script>
</head>

<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");

x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html>

Output:

title

Example explained:

  1. Load "books.xml" into xmlDoc using loadXMLDoc()
  2. Use the get_firstChild fucntion on the first <book> element node to get the first child node that is an element node
  3. Output the node name of first child node that is an element node

Try it yourself


Examples

The following examples use a similar function: 

firstChild: Try it yourself  lastChild: Try it yourself

nextSibling: Try it yourself  previousSibling: Try it yourself


prev next


Ektron
Ektron

The Ektron Intranet lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.

What can you do with the Ektron Intranet?

Ektron

Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search

Ektron

Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform

Ektron

Promote collaboration among coworkers in your organization through project workspaces where others can efficiently find information and work together

Ektron

Personalize your company profile by bookmarking and organizing favorite content, uploading assets, posting photos, blogging, and more

Ektron

Interact with features like tagging, flagging, wikis and ratings found in the Web 2.0 Toolbox

Ektron

Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management

See why there are 20,000+ Ektron integrations worldwide.
Request an INSTANT DEMO or download a FREE TRIAL today.




Jump to: Top of Page or HOME or Printer Friendly Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2008 by Refsnes Data. All Rights Reserved.

Validate Validate W3C-WAI level A conformance icon W3Schools was converted to XHTML in December 1999
SITE SEARCH
 
About W3Schools
W3Schools Forum
dotnetbutton
Dynamic button image generation
WEB HOSTING
$15 Domain Name
Registration
Save $20 / year!
UK Domain Names
UK Web Hosting

Alojamiento Web
Buy UK Domain Names
Register Domain Names
Cheap Domain Names
Cheap Web Hosting
Best Web Hosting
Domain Name Registration
PHP MySQL Hosting
Top 10 Web Hosting
Web Hosting Providers
Web Hosting Company
UK Reseller Hosting
Web Hosting
WEB BUILDING
Website Templates
Flash Templates
Website Builder
Internet Business Opportunity
Custom Programming
FREE Trial or Demo
Web Content Manager
Forms,Web Alerts,RSS
Ecommerce Software
XMLSpy XML Editor
Azbuz Blog
SHOPPING
UK Wholesalers
UK Wholesale
UAE Dubai Property
Private Student Loans
UK Dropshippers & Wholesalers Directory
EDUCATION
US Web Design Schools
HTML Exam
YELLOW PAGES
www.nettkatalogen.no
www.gulex.dk
www.gulex.se
www.gelbex.de
www.teloos.fi
www.teloos.fr
www.teloos.co.uk
www.teloos.at
www.teloos.de