Accessing the DOM

XML elements can be extracted from an XML document by traversing the node tree, by accessing the elements by number, or by accessing the elements by name.

Traversing the node tree

One common way to extract XML elements from an XML document is to traverse the node tree and extract the text value of each element. A small snippet of programming code like a VBScript for/each construct can be written to demonstrate this.

The following VBScript code traverses an XML node tree, and displays the XML elements in the browser:

set xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")

for each x in xmlDoc.documentElement.childNodes
  document.write(x.nodename)
  document.write(": ")
  document.write(x.text)
next

JUST TRY IT and also try to traverse our CD catalog example.

Providing HTML content from XML files

One of the great promises of XML is the possibility to separate HTML documents from their data. By using an XML parser inside the browser, an HTML page can be constructed as a static document, with an embedded JavaScript to provide dynamic data.

The following JavaScript reads XML data from an XML document and writes the XML data into (waiting) HTML elements.

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")

nodes = xmlDoc.documentElement.childNodes

to.innerText = nodes.item(0).text
from.innerText = nodes.item(1).text
header.innerText = nodes.item(2).text
body.innerText = nodes.item(3).text

JUST TRY IT

Accessing XML elements by name

Addressing elements by number is not the preferred way to extract XML elements from an XML document. Using names is a better way.

The following JavaScript reads XML data from an XML document and writes the XML data into (waiting) HTML elements.

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")

to.innerText=
xmlDoc.getElementsByTagName("to").item(0).text
from.innerText=
xmlDoc.getElementsByTagName("from").item(0).text
header.innerText=
xmlDoc.getElementsByTagName("heading").item(0).text
body.innerText=
xmlDoc.getElementsByTagName("body").item(0).text

JUST TRY IT

Important: Make sure that you notice that the text element of a node is the child node of the element. To extract the text (Jani) from an element like this: <from>Jani</from>, you must address the child node like this: getElementsByTagName("from").item(0).text, and not like this: getElementsByTagName("from").text

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

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

• Tell your newsgroup or mailing list
• Link to us from your pages
• Help us correct errors and broken links
• Help us with spelling and grammar
• Validate the XHTML code of this page

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

Copyright 1999-2002 by Refsnes Data. All Rights Reserved

How we converted to XHTML