XML DOM

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

XML Basic
XML HOME
XML Introduction
XML How to use
XML Tree
XML Syntax
XML Elements
XML Attributes
XML Validation
XML Validator
XML Viewing
XML CSS
XML XSLT
XML JavaScript
XML Parser
XML DOM
XML to HTML
XML HTTP Request
XML Application
XML Advanced
XML Namespaces
XML CDATA
XML Encoding
XML Server
XML DOM Advanced
XML Don't
XML Technologies
XML in Real Life
XML Editors
XML Summary
Examples/Quiz
XML Examples
XML Quiz
XML Exam

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# XML DOM

The DOM (Document Object Model) defines a standard way for accessing and manipulating documents.

## The XML DOM

The XML DOM (XML Document Object Model) defines a standard way for accessing and manipulating XML documents.

The DOM views XML documents as a tree-structure. All elements can be accessed through the DOM tree. Their content (text and attributes) can be modified or deleted, and new elements can be created. The elements, their text, and their attributes are all known as nodes.

In the examples below we use the following DOM reference to get the text from the <to> element:

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

- xmlDoc - the XML document created by the parser.
- getElementsByTagName("to")[0] - the first <to> element
- childNodes[0] - the first child of the <to> element (the text node)
- nodeValue - the value of the node (the text itself)

You can learn more about the XML DOM in our XML DOM tutorial.

## The HTML DOM

The HTML DOM (HTML Document Object Model) defines a standard way for accessing and manipulating HTML documents.

All HTML elements can be accessed through the HTML DOM.

In the examples below we use the following DOM reference to change the text of the HTML element where id="to":

document.getElementById("to").innerHTML=

- document - the HTML document
- getElementById("to") - the HTML element where id="to"
- innerHTML - the inner text of the HTML element

You can learn more about the HTML DOM in our HTML DOM tutorial.

## Parsing an XML File - A Cross browser Example

The following code loads an XML document ("note.xml") into the XML parser:

    <html>
    <head>
    <script type="text/javascript">
    function parseXML()
    {
    try //Internet Explorer
      {
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      }
    catch(e)
      {
      try //Firefox, Mozilla, Opera, etc.
        {
        xmlDoc=document.implementation.createDocument("","",null);
        }
      catch(e)
        {
        alert(e.message);
        return;
        }
      }
    xmlDoc.async=false;
    xmlDoc.load("note.xml");

    document.getElementById("to").innerHTML=
    xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
    document.getElementById("from").innerHTML=
    xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
    document.getElementById("message").innerHTML=
    xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
    }
    </script>
    </head>

    <body onload="parseXML()">
    <h1>W3Schools Internal Note</h1>
    <p><b>To:</b> <span id="to"></span><br />
    <b>From:</b> <span id="from"></span><br />
    <b>Message:</b> <span id="message"></span>
    </p>
    </body>
    </html>

Output:

# W3Schools Internal Note

To: Tove
From: Jani
Message: Don't forget me this weekend!

Try it yourself

## Important Note

To extract the text "Jani" from the XML, the syntax is:

    getElementsByTagName("from")[0].childNodes[0].nodeValue

In the XML example there is only one <from> tag, but you still have to specify the array index [0], because the XML parser method getElementsByTagName() returns an array of all <from> nodes.

## Parsing an XML String - A Cross browser Example

The following code loads and parses an XML string:

    <html>
    <head>
    <script type="text/javascript">
    function parseXML()
    {
    text="<note>";
    text=text+"<to>Tove</to>";
    text=text+"<from>Jani</from>";
    text=text+"<heading>Reminder</heading>";
    text=text+"<body>Don't forget me this weekend!</body>";
    text=text+"</note>";
    try //Internet Explorer
      {
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async="false";
      xmlDoc.loadXML(text);
      }
    catch(e)
      {
      try // Firefox, Mozilla, Opera, etc.
        {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(text,"text/xml");
        }
      catch(e)
        {
        alert(e.message);
        return;
        }
      }
    document.getElementById("to").innerHTML=
    xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
    document.getElementById("from").innerHTML=
    xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
    document.getElementById("message").innerHTML=
    xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
    }
    </script>
    </head>

    <body onload="parseXML()">
    <h1>W3Schools Internal Note</h1>
    <p><b>To:</b> <span id="to"></span><br />
    <b>From:</b> <span id="from"></span><br />
    <b>Message:</b> <span id="message"></span>
    </p>
    </body>
    </html>

Output:

# W3Schools Internal Note

To: Tove
From: Jani
Message: Don't forget me this weekend!

Try it yourself

Note: Internet Explorer uses the loadXML() method to parse an XML string, while other browsers uses the DOMParser object.

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...

6 ways to take your site to the next level with Ektron:

| Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more.
| Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility.
| Streamline content and document management. Users need to quickly and intuitively find and add information.
| Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms.
| Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy
| Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily.

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

WEB HOSTING
Password Protect Your Web Pages
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE 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
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. 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-2009 by Refsnes Data. All Rights Reserved.