The XML Document Object Model (DOM) is a programming interface for XML documents. It defines the way an XML document can be accessed and manipulated.
As a W3C specification, the objective for the XML DOM has been to provide a standard programming interface to a wide variety of applications. The XML DOM is designed to be used with any programming language and any operating system.
With the XML DOM, a programmer can create an XML document, navigate its structure, and add, modify, or delete its elements.
As you will see 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, its information can be retrieved and manipulated by accessing the 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 Model is used to access the individual elements in the node tree. As an example, the childNodes property of the documentElement can be accessed with a for/each construct to enumerate each individual node.
The Microsoft XML parser 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.
Most of the parser functions, demonstrated in this tutorial, are from the W3C XML DOM recommendation, apart from the document load and error functions. (Believe it or not: The official DOM does not include standard functions for loading XML documents !!)
The following table lists the most commonly used node types supported by the Microsoft XML parser:
| 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 from this Web Site, you have to run Microsoft Internet Explorer 5.0 or higher!
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.
To read and update - create and manipulate - an XML document, you need an XML parser.
The Microsoft XMLDOM parser features a 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 an 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 type="text/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 type="text/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.
The parseError object can be used to extract error information from the Microsoft XML parser.
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.
The parseError object is not a part of the W3C DOM standard.
With this code we can 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)
|
With this code we let the parser load an XML document that is not well formed.
(You can study more about Well Formed and Valid XML at our XML School)
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)
|
Try it Yourself 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 |
To help you validate your xml, we have used Microsoft's XML parser to create an xml validator. Paste your xml in the text area, and validate it by pressing the validate button
You can also validate your xml files simply by typing the url of your xml file and pressing the submit button
If you want to validate an error-free XML file you can paste this address into the name field: http://www.w3schools.com/dom/cd_catalog.xml
NOTE: If you get an error message saying "Access denied" when accessing this file, it is because your Internet Explorer security settings do not allow access across domains.
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.
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.
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
|
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
|
Important: To extract the text (Jani) from an element like this: <from>Jani</from>, the syntax is: getElementsByTagName("from").item(0).text, and NOT like this: getElementsByTagName("from").text.
The reason why you must address the child node like getElementsByTagName("from").item(0).text is that the result returned from getElementsByTagName is an array of nodes, containing all nodes found within the XML document with the specified tag name (in this case "from").
The HttpRequest object provides client-side communication with a server.
readyState
How to return the state of the document. This property changes as the document
is being loaded.
responseText
How to return the request as a string.
status
How to return the status of the operation, as a code.
statusText
How to return the status of the operation, as a string.
With the httpRequest object you can send a request from the client to the server.
If you are using JavaScript in IE 5.0, you can create the httpRequest object with the following code:
var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP")
|
If you are using VBScript you create the httpRequest object with the following code:
set xmlHTTP = CreateObject("Microsoft.XMLHTTP")
|
The httpRequest object is not a part of the W3C DOM standard.
How to get an xml file from the server using the httpRequest object (works only in IE):
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
xmlHttp.open("GET", "note.xml", false)
xmlHttp.send()
xmlDoc=xmlHttp.responseText
|
Netscape compatible code:
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "note.xml", false);
xmlHttp.send(null);
xmlDoc = xmlHttp.responseText;
|
You can also send an xml document to an ASP page on the server, analyze the request, and send back the result.
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
xmlHttp.open("POST", "demo_dom_http.asp", false)
xmlHttp.send(xmlDoc)
document.write(xmlHttp.responseText)
|
The ASP page, written in VBScript:
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
if x.NodeName = "to" then name=x.text
next
response.write(name)
|
You send the result back to the client using the response.write property.
At the moment, the Microsoft XMLHTTP object can only be run in the BROWSER.
SERVER code that attempts to use the XMLHTTP to communicate with other Web servers, may function incorrectly or perform poorly.
This is a bug in the HTTPRequest object. For more information read Microsoft's Knowledge Base article Q237906.
The rumor is that Microsoft will have this bug fixed in an upcoming release of the XML Library. In the meantime, you may have to use a commercially available ASPHTTP component.
| Property | Description |
| readyState | Returns the state of the document |
| responseBody | Returns the response as an array of unsigned bytes |
| responseStream | Returns the response as an IStream |
| responseText | Returns the response as a string |
| responseXML | Returns the response as an xml document |
| status | Returns the status code as a number |
| statusText | Returns the status as a string |
| Property | Description |
| abort() | Cancel the current http request |
| getAllResponseHeaders() | Returns the value of the http headers |
| getResponseHeader(headerName) | Returns the value of one specified http header |
| open(method, url, async, userid, password) | Opens http request, and specifies the information |
| send() | Send the http request to the server |
| setRequestHeader(headerName,headerValue) | Specifies the name of a |
Take a look at the XML file used in the examples: note_special.xml
NodeType
We traverse the file note_special.xml to get the nodeType of the nodes.
NodeName
We traverse the file note_special.xml to get the nodeName of the same nodes.
NodeValue
We traverse the file note_special.xml to get the nodeValue of the same nodes.
NodeTypeString
In IE5, you can also get the nodeType as a string, with the .nodeTypeString
property.
Nodes are separated into different types. Below is a list of the types and what the .nodeName and the .nodeValue properties return. In Internet Explorer 5, you can use the .nodeTypeString property to return the nodeType as a string.
| nodeType | nodeTypeString | nodeName | nodeValue |
|---|---|---|---|
| 1 | element | tagName | null |
| 2 | attribute | name | value |
| 3 | text | #text | content of node |
| 4 | cdatasection | #cdata-section | content of node |
| 5 | entityreference | entity reference name | null |
| 6 | entity | entity name | null |
| 7 | processinginstruction | target | content of node |
| 8 | comment | #comment | comment text |
| 9 | document | #document | null |
| 10 | documenttype | doctype name | null |
| 11 | documentfragment | #document fragment | null |
| 12 | notation | notation name | null |
| NodeType | Named Constant |
|---|---|
| 1 | ELEMENT_NODE |
| 2 | ATTRIBUTE_NODE |
| 3 | TEXT_NODE |
| 4 | CDATA_SECTION_NODE |
| 5 | ENTITY_REFERENCE_NODE |
| 6 | ENTITY_NODE |
| 7 | PROCESSING_INSTRUCTION_NODE |
| 8 | COMMENT_NODE |
| 9 | DOCUMENT_NODE |
| 10 | DOCUMENT_TYPE_NODE |
| 11 | DOCUMENT_FRAGMENT_NODE |
| 12 | NOTATION_NODE |
Take a look at the XML file used in the examples: note.xml
nodeName
How to return the name of a node.
nodeValue
How to return the value of a node.
nextSibling
How to return the name of the nextSibling node.
Text
In IE5 you can return the text from a node and all its child nodes.
xml
In IE5 you can return the xml from a node and all its child nodes.
appendChild
How to create an element node with a text node and then append it as a child
node.
insertBefore
How to create a text node and then insert it before a specified node.
The node object represents a node in the node tree. A node can be an element node, a text node, or any other of the node types explained in the DOM nodeType chapter. All of these node types have properties and methods. The general properties and methods for all node types are listed below:
| Property | Description |
|---|---|
| attributes | Returns a NamedNodeMap containing all attributes for this node |
| childNodes | Returns a NodeList containing all the child nodes for this node |
| firstChild | Returns the first child node for this node |
| lastChild | Returns the last child node for this node |
| nextSibling | Returns the next sibling node. Two nodes are siblings if they have the same parent node |
| nodeName | Returns the nodeName, depending on the type |
| nodeType | Returns the nodeType as a number |
| nodeValue | Returns, or sets, the value of this node, depending on the type |
| ownerDocument | Returns the root node of the document |
| parentNode | Returns the parent node for this node |
| previousSibling | Returns the previous sibling node. Two nodes are siblings if they have the same parent node |
| Method | Description |
|---|---|
| appendChild(newChild) | Appends the node newChild at the end of the child nodes for this node |
| cloneNode(boolean) | Returns an exact clone of this node. If the boolean value is set to true, the cloned node contains all the child nodes as well |
| hasChildNodes() | Returns true if this node has any child nodes |
| insertBefore(newNode,refNode) | Inserts a new node, newNode, before the existing node, refNode |
| removeChild(nodeName) | Removes the specified node, nodeName |
| replaceChild(newNode,oldNode) | Replaces the oldNode, with the newNode |
The node object has some properties and methods that are defined in Internet Explorer 5 only:
| Property | Description |
|---|---|
| basename | Returns the nodeName without the namespaces |
| dataType | Returns, or sets, the dataType for this node |
| definition | |
| nodeTypeString | Returns the nodeType as a string |
| nodeTypedValue | |
| specified | Returns whether the nodeValue is specified in the DTD/Schema or not |
| text | Returns, or sets, the text for this node and all its child nodes |
| xml | Returns, or sets, the xml for this node and all its child nodes |
| Method | Description |
|---|---|
| selectNodes(pattern) | |
| selectSingleNode(pattern) | |
| transformNode(stylesheet) | Processes the node and its childNodes with the specified XSL stylesheet, and returns the result |
Take a look at the XML file used in the examples: note.xml
length
How to return the number of nodes in a nodeList.
item
How to return a specific node in the nodeList.
nextNode()
IE5 allows you to return the next node in the nodeList.
reset()
IE5 allows you to reset the pointer to the first node in the nodeList.
The nodeList object represents a node and its child nodes as a node tree. The properties and methods of the nodeList object are listed below:
| Property | Description |
|---|---|
| length | Returns the number of nodes in a nodeList |
| Method | Description |
|---|---|
| item | Returns a specific node in the nodeList |
The nodeList object has some methods that are defined in Internet Explorer 5 only:
| Property | Description |
|---|---|
| nextNode() | Returns the next object in the node list |
| reset() | Resets the pointer to the first node in the nodeList |
Take a look at the XML file used in the examples: note.xml
documentElement
How to return the node name of the root element.
createCDATASection
How to create a CDATA node and then append it to the nodeList.
createComment
How to create a comment node and then append it to the nodeList.
createElement
How to create an element and then append it to the nodeList.
createTextNode
How to create a text node then append the text node to the nodeList.
getElementsByTagName
How to return the value of a specified node.
The document object is the root element in the node tree. All nodes in the node tree are childNodes of the document element. The document element is required in all XML documents. The properties and methods of the Document object are listed below:
| Property | Description |
|---|---|
| documentElement | Returns the root element of the document |
| doctype | Returns the DTD or Schema for the document. |
| implementation | Returns the implementation object for this particular document |
| Method | Description |
|---|---|
| createAttribute(attributeName) | Creates an attribute node with the specified attribute name |
| createCDATASection(text) | Creates a CDATASection, containing the specified text |
| createComment(text) | Creates a comment node, containing the specified text |
| createDocumentFragment() | Creates an empty documentFragment object |
| createElement(tagName) | Creates an element with the specified tagName |
| createEntityReference(referenceName) | Creates an entityReference with the specified referenceName |
| createProcessingInstruction(target,text) | Creates a processingInstruction node, containing the specified target and text |
| createTextNode(text) | Creates a text node, containing the specified text |
| getElementsByTagName(tagName) | Returns the specified node, and all its child nodes, as a nodeList |
Take a look at the XML file used in the examples: note.xml
tagName
How to return the tag name of a node.
getElementsByTagName
How to return the value of a specified node.
getAttribute
How to return an attribute's value.
setAttribute
How to change an attribute's value.
setAttribute 2
How to set a new attribute and its value.
The element object represents the element nodes in the document. If the element node contains text, this text is represented in a text node. The properties and methods of the Element object are listed below:
| Property | Description |
|---|---|
| tagName | Returns, or sets the name of the node |
| Method | Description |
|---|---|
| getAttribute(attributeName) | Returns the value of the specified attribute |
| getAttributeNode(attributeName) | Returns the specified attribute node as an object |
| getElementsByTagName(tagName) | Returns the specified node, and all its child nodes, as a nodeList |
| normalize() | Puts the text nodes for this element, and its child nodes, into one text node, returns nothing |
| removeAttribute(attributeName) | Removes the specified attribute's value. If the attribute has a default value this value is inserted |
| removeAttributeNode(attributeNode) | Removes the specified attribute node. If the attribute node has a default value, this attribute is inserted |
| setAttribute(attributeName, attributeValue) | Inserts a new attribute |
| setAttributeNode(attributeNodeName) | Inserts a new attribute node |
Take a look at the XML file used in the examples: note.xml
name
How to return the name of an attribute.
value
How to return the value of an attribute.
specified
Returns True if the value is set in the document, False if the value is a
default value in the DTD/Schema.
The attr object returns an attribute of an element object as an attribute node. The attr object has the same properties and methods as nodes in general. The properties of the Attr object are listed below:
| Property | Description |
|---|---|
| name | Sets or returns the name of the attribute |
| specified | Returns a boolean value indicating if the node's value is set in the document or not |
| value | Sets or returns the value of the attribute |
Take a look at the XML file used in the examples: note.xml
splitText
The SplitText method splits a text at the given character and returns the rest
of the text.
createTextNode
How to create a text node.
The text object represents the text inside an element as a node. The method of the text object is listed below:
| Method | Description |
|---|---|
| splitText(number) | Splits the text at the specified character, and returns the rest of the text |
Take a look at the XML file used in the examples: note.xml
createCDATASection
How to create a CDATASection node.
The CDATASection object represents the CDATASection nodes in a document. The CDATASection node is used to escape parts of text which normally would be recognized as markup.
Take a look at the XML file used in the examples: note.xml
createComment
How to create a comment node.
The comment object represents the comment nodes in a document. The comment nodes have no nodeName, but their nodeValue is the comment text.
The XML file used in the examples below: note.xml
The XML Parser
Load an XML file into the parser
Load pure XML text into the parser
Accessing the DOM
Traverse the node tree of note.xml
Providing HTML content from note.xml
Accessing XML elements by name
The XML file used in the example below: note_error.xml
Parser Errors
XML document that is not well formed
The XML file used in the examples below: note_special.xml
Node Types
Traverse the xml file to get the nodeType of the nodes (nodeType)
Traverse the xml file to get the nodeName of the same nodes (nodeName)
Traverse the xml file to get the nodeValue of the same nodes (nodeValue)
Get the nodeType as a string (IE5 nodeTypeString)
The XML file used in the examples below: note.xml
The HTTPRequest Object
Return the state of the document (readyState)
Return the request as a string (responseText)
Return the status of the operation, as a code (status)
Return the status of the operation, as a string (statusText)
The Node Object
Return the name of a node (nodeName)
Return the value of a node (nodeValue)
Return the name of the nextSibling node (nextSibling)
Return the text from a node and all its child nodes (IE5 text)
Return the xml from a node and all its child nodes (IE5 xml)
Create a text node and append it as a child node (appendChild)
Create a text node and insert it before a specified node (insertBefore)
The NodeList Object
Return the number of nodes in a nodeList (length)
Return a specified node in the nodeList (item)
Return the next node in the nodeList (IE5 nextNode())
Reset the pointer to the first node in the nodeList (IE5 reset())
The Document Object
Return the node name of the root element (documentElement)
Create a CDATA node and append it to the nodeList (createCDATASection)
Create a comment node and append it to the nodeList (createComment)
Create an element and append it to the nodeList (createElement)
Create a text node and append it to the nodeList (createTextNode)
Return the value of a specified node (getElementsByTagName)
The Element Object
Return the tag name of a node (tagName)
Return the value of a specified node (getElementsByTagName)
Return an attribute value (getAttribute)
Change an attribute's value (setAttribute)
Set a new attribute and its value (setAttribute)
The Attr Object
Return the name of an attribute (name)
Return the value of an attribute (value)
Is the value set in the document or a default value in the DTD/Schema
(specified)
The Text Object
Split a text and return the rest of the text (splitText)
Create a text node (createTextNode)
The CDATASection Object
Create a CDATA section node (createCDATASection)
The Comment Object
Create a comment node (createComment)
In our XML DOM tutorial you will learn what DOM is. The XML DOM is a programming interface for XML documents. It defines the way an XML document can be accessed and manipulated. Start Learning DOM!
At W3Schools you will find complete DOM objects reference, with all the objects and their properties and methods. DOM References.
Learn by 50 examples! With our editor, you can edit the source, and click on a test button to view the result. Try-It-Yourself!
Introduction to the XML
DOM
An introduction to the XML Document Object Model.
Parsing the DOM
How to parse XML Document Objects using Microsoft XML Parser.
Parsing Errors
The parseError object and its properties. How to test for valid XML and display
the error.
XML Validator
The parseError object is used to create a validator for xml files.
Accessing the DOM
How to access the elements of an XML Document.
HttpRequest
The httpRequest object and its properties and methods.
The Node Types
Description of the node types, with examples.
The Node Object
Properties and methods of the node object, with examples,
The NodeList Object
Properties and methods of the nodeList object, with examples.
The Document Object
Properties and methods of the document object, with examples.
The Element Object
Properties and methods of the element object, with examples.
The Attr Object
Properties of the attr object, with examples.
The Text Object
Method of the text object, with examples.
The CDATASection
Object
Description of the CDATASection object, with examples.
The Comment Object
Description of the comment object, with examples.
DOM Examples
Lots of DOM Examples !!!
