XML DOM Advanced
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 ElementThe 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. <
Make your web applications look like a million bucks
|
|
Most web applications today use boring methods to present data to their viewers using grids or simple HTML tables. FusionCharts induces "life" into the web applications by converting monotonous data into lively charts, gauges & maps.
FusionCharts works with all technologies like ASP, ASP.NET, PHP, ColdFusion, Ruby on Rails, JSP, HTML pages etc.
and connects to any database to render animated & interactive charts. It takes less than 15 minutes and no expertise
whatsoever to build your first chart and just a glance of it to captivate your audience. This fact is endorsed by our
12,000 customers and 150,000 users which include a majority of the Fortune 500 companies.
And yeah, your applications could look like a million bucks by spending just $69.
So go ahead, download your
copy of FusionCharts and start "wow-ing" your customers now!
|
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
