The DOM is a programming interface for HTML and XML documents. It defines the way a document can be accessed and manipulated.
Using a DOM, a programmer can create a document, navigate its structure, and add, modify, or delete its elements.
As a W3C specification, one important objective for the DOM has been to provide a standard programming interface that can be used in a wide variety of environments and applications.
The W3C DOM has been
designed to be used with any programming language.
As you will se in the next section, a program called an XML parser can be used to load
an XML document into the memory of your computer. When the document is loaded, it’s information can be
retrieved and manipulated by accessing the Document Object Model (DOM).
The DOM represents a tree view of the XML document. The documentElement is the top-level of the tree. This element has one or many childNodes that represent the branches of the tree.
A Node Interface is used to read and write (or access if you like) the individual elements in the XML node tree. The childNodes property of the documentElement can be accesses with a for/each construct to enumerate each individual node.
The Microsoft XML parser used to demonstrate the DOM in this Web, supports all the necessary functions to traverse the node tree, access the nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.
All the demonstrated Microsoft XML parser functions are from the official W3C XML DOM recommendation, apart from the load and loadXML functions. (Believe it or not: The official DOM does not include standard functions for loading XML documents
!!)
A total of 13 node types are currently supported by the Microsoft XML parser. The following table lists the most commonly used node types:
| Node Type | Example |
|---|---|
| Document type | <!DOCTYPE food SYSTEM “food.dtd”> |
| Processing instruction | <?xml version=”1.0″?> |
| Element | <drink type=”beer”>Carlsberg</drink> |
| Attribute | type=”beer” |
| Text | Carlsberg |
To view the examples in this Web, you have to use Microsoft Internet
Explorer 5.0 !
To read and update – create and manipulate – an XML document, you need an XML parser. The Microsoft XML parser is a COM component that comes with Microsoft Internet Explorer 5.0. Once you have installed IE 5.0, the parser is available to scripts inside HTML documents and ASP files.
The Microsoft XMLDOM parser features a language-neutral programming model that:
If you are using JavaScript in IE 5.0, you can
create an XML document object with the following code:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
If you are using VBScript you
create the XML document object with the following code:
set xmlDoc = CreateObject("Microsoft.XMLDOM")
If you are using VBScript in an Active Server Page (ASP), you can use the following code:
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
The following code loads an existing XML document (note.xml) into the XML parser:
<script language="JavaScript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
// ....... processing the document goes here
</script>
The first line of the script creates an instance of the Microsoft XML parser. The third line tells the parser to load an XML document called note.xml. The second line assures that the parser will halt execution until the document is fully loaded.
The following code loads a text string into the XML parser:
<script language="JavaScript">
var text="<note>"
text=text+"<to>Tove</to><from>Jani</from>"
text=text+"<heading>Reminder</heading>"
text=text+"<body>Don't forget me this weekend!</body>"
text=text+"</note>"
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.loadXML(text)
// ....... processing the document goes here
</script>
Note that the “loadXML” method (instead of the “load”
method) is used to load a text string.
If you try to open an XML document, the XML Parser might generate an error. By accessing the parseError object, the exact error code, the error text, and even the line that caused the error can be retrieved:
In this example we let the XML parser try to load a non existing file, and display some of its error properties:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("ksdjf.xml")
document.write("<br>Error Code: ")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error Reason: ")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error Line: ")
document.write(xmlDoc.parseError.line)
Now we let the parser load an XML document that is not well formed. (if you don’t know what well formed XML is, read the XML part of this Web)
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note_error.xml")
document.write("<br>Error Code: ")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error Reason: ")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error Line: ")
document.write(xmlDoc.parseError.line)
or just look at the XML file
| Property | Description |
| errorCode | Returns a long integer error code |
| reason | Returns a string explaining the reason for the error |
| line | Returns a long integer representing the line number for the error |
| linePos | Returns a long integer representing the line position for the error |
| srcText | Returns a string containing the line that caused the error |
| url | Returns the url pointing the loaded document |
| filePos | Returns a long integer file position of the error |
One very common way to extract XML elements from an XML document is to traverse the node three and extract the text value of each elements. 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
and
also try to traverse our CD
catalog example.
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. When you add that these JavaScripts can access Active
Server Pages from a Web server, the future looks very bright.
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
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")
document.write(xmlDoc.getElementsByTagName("from").item(0).text)