Home arrow JavaScript arrow Manipulating XML Data with JavaScript

Manipulating XML Data with JavaScript

Yesterday you saw a number of different ways to obtain XML documents to manipulate with JavaScript. Today, you will learn how to manipulate the data. This article is excerpted from chapter 21 of JavaScript: The Definitive Guide, Fifth Edition, written by David Flanagan (O'Reilly; ISBN: 0596101996). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
August 09, 2007
  1. · Manipulating XML Data with JavaScript
  2. · 21.2.2 Example: Creating an HTML Table from XML Data
  3. · 21.3 Transforming XML with XSLT
  4. · 21.4 Querying XML with XPath
  5. · 21.4.2 Evaluating XPath Expressions

print this article

Manipulating XML Data with JavaScript
(Page 1 of 5 )

21.2 Manipulating XML with the DOM API

The previous section showed a number of ways to obtain parsed XML data in the form of a Document object. The Document object is defined by the W3C DOM API and is much like the HTMLDocument object that is referred to by the document property of the web browser.

The following subsections explain some important differences between the HTML DOM and the XML DOM and then demonstrate how you can use the DOM API to extract data from an XML document and display that data to a user by dynamically creating nodes in the browser’s HTML document.

21.2.1  XML Versus HTML DOM

Chapter 15 explained the W3C DOM but focused on its application in client-side JavaScript to HTML documents. In fact, the W3C designed the DOM API to be language-neutral and focused primarily on XML documents; its use with HTML documents is through an optional extension module. In Part IV, notice that there are separate entries for Document and HTMLDocument, and for Element and HTMLElement. HTMLDocument and HTMLElement are extensions of the core XML Document and Element objects. If you are used to manipulating HTML documents with the DOM, you must be careful not to use HTML-specific API features when working with XML documents.

Probably the most important difference between the HTML and XML DOMs is that the getElementById() method is not typically useful with XML documents. In DOM Level 1, the method is actually HTML-specific, defined only by the HTMLDocument interface. In DOM Level 2, the method is moved up a level to the Document interface, but there is a catch. In XML documents, getElementById() searches for elements with the specified value of an attribute whose type is “id”. It is not sufficient to define an attribute named “id” on an element: the name of the attribute does not matter—only the type of the attribute. Attribute types are declared in the DTD of a document, and a document’s DTD is specified in the DOCTYPE declaration. XML documents used by web applications often have no DOCTYPE declaration specifying a DTD, and a call to getElementById() on such a document always returns null . Note that the getElementsByTagName() method of the Document and Element interfaces works fine for XML documents. (Later in the chapter, I’ll show you how to query an XML document using powerful XPath expressions; XPath can be used to retrieve elements based on the value of any attribute.)

Another difference between HTML and XML Document objects is that HTML documents have a body property that refers to the <body> tag within the document. For XML documents, only the documentElement property refers to the top-level element of the document. Note that this top-level element is also available through the childNodes[] property of the document, but it may not be the first or only element of that array because an XML document may also contain a DOCTYPE declaration, comments, and processing instructions at the top level.

There is also an important difference between the XML Element interface and the HTMLElement interface that extends it. In the HTML DOM, standard HTML attributes of an element are made available as properties of the HTMLElement interface. The src attribute of an <img> tag, for example, is available through the src property of the HTMLImageElement object that represents the <img> tag. This is not the case in the XML DOM: the Element interface has only a single tagName property. The attributes of an XML element must be explicitly queried and set with getAttribute() , setAttribute() , and related methods.

As a corollary, note that special attributes that are meaningful on any HTML element are meaningless on all XML elements. Recall that setting an attribute named “id” on an XML element does not mean that that element can be found with getElementById() . Similarly, you cannot style an XML element by setting its style attribute. Nor can you associate a CSS class with an XML element by setting its class attribute. All these attributes are HTML-specific.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials