The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Processing XML with jQuery

Build dynamic, XML-based UI apps with jQuery, XML, DOM, and Ajax

Aleksandar Kolundzija (ak@subchild.com), Web developer, Meebo

Aleksandar Kolundzija is a web developer with over 10 years of industry experience, currently managing the Frontend Engineering team at Meebo. He is also the founder and creator of the Gallerama.com web-based photo management application. He holds a Computer Science degree from Hunter College. For more information on Alex, you can check out his blog at www.subchild.com or find him on Twitter by his handle @subchild.

Summary: Did you know that you can use jQuery's fast and powerful DOM traversal and manipulation methods to process any XML file? This ability, combined with jQuery's ability to easily load XML files using Ajax, makes this JavaScript library a great choice for building dynamic, XML-based UI applications. In this tutorial, take a closer look at the specifics of this approach and explore its benefits and caveats. Along the way, you get an overview of DOM processing in the browser and discover how useful jQuery's methods can prove when you parse XML. The tutorial also outlines the basic steps in the development of a generic, browser-based live XML editor using the covered techniques.

Date: 01 Feb 2011
Level: Intermediate
PDF: A4 and Letter (129 KB | 24 pages)Get Adobe® Reader®

Activity: 93885 views
Comments:

Resources

Learn

DOM objects and methods tutorial (Mark "Tarquin" Wilton-Jones, January 2009): Find a comprehensive listing of all properties, collections, and methods of the W3C DOM.
The Mozilla Developer Center: Visit a great resource for web developers.
element.getElementsByTagName: On this page, find a thorough overview of the getElementsByTagName covered in this tutorial.
LiveXMLEditor: View more information about LiveXMLEditor.
JavaScript and DOM basics: View Siarhei Barysiuk's excellent slides.
jQuery JavaScript Library: Visit jQuery's thorough documentation website.
Process XML in the browser using jQuery (Uche Ogbuji, developerWorks, December 2009): Find key information for processing namespaced XML and navigate some major pitfalls to gain the benefits of the popular Web application API.
JavaScript and the Document Object Model (Nicholas Chase, developerWorks, July 2002): Look at the JavaScript approach to DOM and the building of a web page to which the user can add notes and edit note content.
Understanding DOM (Nicholas Chase, developerWorks, March 2007): In this tutorial, learn about the structure of a DOM document.
JavaScript tutorial: Learn how to use the scripting language of the web.
XML area on developerWorks: Get the resources you need to advance your skills in the XML arena.
My developerWorks: Personalize your developerWorks experience.
IBM XML certification: Find out how you can become an IBM-Certified Developer in XML and related technologies.
XML technical library: See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks. Also, read more XML tips.
developerWorks technical events and webcasts: Stay current with technology in these sessions.
developerWorks on Twitter: Join today to follow developerWorks tweets.
developerWorks podcasts: Listen to interesting interviews and discussions for software developers.
developerWorks on-demand demos: Watch demos ranging from product installation and setup for beginners to advanced functionality for experienced developers.

Get products and technologies

jQuery: Download the jQuery JavaScript library, available under either the MIT or GNU Public License. You can either download it and serve it locally, or include and serve it directly from the Google CDN.
jQuery Browser Compatibility: Visit this page for a list of recommended browsers.
Firebug: Get the essential debugging tool for Firefox users.
LiveXMLEditor: Try the XML editor created by the author of this tutorial.
PHP: Hypertext Preprocessor: Get the widely-used scripting language that is well suited for web development and can be embedded into HTML. This tutorial uses PHP 5.2 or higher.
IBM product evaluation versions: Download or explore the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.

Discuss

XML zone discussion forums: Participate in any of several XML-related discussions.
The developerWorks community: Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.