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

XML DOM Advanced

« Previous Next Chapter »

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


The XML DOM

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 an earlier chapter of this tutorial we introduced the XML DOM , and used the XML DOM getElementsByTagName() method to retrieve data from a DOM tree.

In this chapter we will describe some other commonly used XML DOM methods. In the examples below, we have used the XML file: books.xml.

To learn all about the XML DOM, please visit our XML DOM tutorial.


Get the Value of an Element

The following code retrieves the text value of the first <title> element:

Example

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;

Try it yourself »

Get the Value of an Attribute

The following code retrieves the text value of the "lang" attribute of the first <title> element:

Example

txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");

Try it yourself »

Change the Value of an Element

The following code changes the text value of the first <title> element:

Example

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";

Try it yourself »

Change the Value of an Attribute

The setAttribute() method can be used to change the value of an existing attribute, or to create a new attribute.

The following code adds a new attribute called "edition" (with the value "first") to each <book> element:

Example

x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)
  {
  x[i].setAttribute("edition","first");
  }

Try it yourself »

Create an Element

The createElement() method creates a new element node.

The createTextNode() method creates a new text node.

The appendChild() method adds a child node to a node (after the last child).

To create a new element with text content, it is necessary to create both an element node and a text node.

The following code creates an element (<edition>), and adds it to the first <book> element:

Example

newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);

x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);

Try it yourself »

Example explained:

  • Create an <edition> element
  • Create a text node with value = "First"
  • Append the text node to the <edition> element
  • Append the <edition> element to the first <book> element

Remove an Element

The removeChild() method removes a specified node (or element).

The following code fragment will remove the first node in the first <book> element:

Example

x=xmlDoc.getElementsByTagName("book")[0];

x.removeChild(x.childNodes[0]);

Try it yourself »

Note: The result of the example above may be different depending on what browser you use. Firefox treats new lines as empty text nodes, Internet Explorer don't. You can read more about this and how to avoid it in the XML DOM tutorial.


These were a few examples of things you can do with the XML DOM.

To learn all about the XML DOM, please visit our XML DOM tutorial.

<
« Previous Next Chapter »


Altova® MissionKit® - Integrated Suite of XML Tools

Altova MissionKit

The Altova MissionKit is an integrated suite of tools ideal for:

  • XML development
  • Web & Web services development
  • Data mapping & integration
  • Rendering & publishing XML & database data
  • XBRL validation, taxonomy editing, transformation & rendering

The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet designer; DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.

Try all 6 products free for 30 days!

Download a fully-functional free trial

  Altova Missionkit


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting
Top Web Hosting
Windows Hosting
WEB BUILDING
XML Editor – Free Trial!
FREE Flash Website
FREE Web Templates
FLIGHT TICKETS
Find the cheapest flight
to any destination now!
EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification
STATISTICS
Browser Statistics
Browser OS
Browser Display