JavaScript: E4X

ECMAScript for XML (E4X) is an extension of JavaScript that provides native JavaScript syntax for manipulating XML.

XML in Alt

The Alt Framework makes heavy use of XML for both SQueaL's SQL Schema and the Onion ML markup system.

E4X's native JavaScript syntax was the logical approach for working with XML in the Alt Framework on the server side.

E4X Documentation

Aside from the highly technical ECMA specification, there are no official references on E4X.

The best documentation I have found to date is this page.

Only Firefox 1.5+ supports E4X natively in client-side JavaScript, so that any web page that needs to work in Internet Explorer cannot use E4X.

Quick Reference

This reference is not intended to be official, it is simply my interpretation of various features in E4X.

XML object

E4X defines XML as a core JavaScript object. It can be constructed by literal XML in your code: <foo>bar</foo>, or with the constructor: new XML("<foo>bar</foo>"). The key difference with the literal XML syntax is that the XML is syntax checked while the script is compiled.

The literal XML syntax allows you to refer to JavaScript variables in XML blocks by using curly braces. E.g. <foo>{somevar}</foo>. This can be used for attributes (e.g. <foo id={somevar}/>) or even the tag and attribute names themselves (e.g. <{tagName} {attributeName}={attributeValue}/>).

xml = <foo name="bar">
       <sbu> 
        <bus/>
       </sbu>
       <boo/>
       <boo id="dave" />
      </foo>;

With the above JavaScript, you can do the following:

• Retrieve the id of the foo tag with xml.@name,
• retrieve the sbu tag (and its contents) with xml.sbu,
• retrieve a XMLList of boo tags with xml.boo,
• retrieve the bus tag with xml..bus,
• retrieve the second boo tag with xml.boo(@id=="dave"),
• add a new node with xml.cat = 5;,
• and add a new node with xml.appendChild(<bar/>);

... to name a few things.

XMLList object

This object acts like an array with one main difference: length is a method and not a property. That means to get the number of XML nodes in a XMLList object, you need to use xmllist.length().

E4X Web sites

Recommended Resources

These are the links I recommend reading to get a feel for E4X from several sources.

rephrase E4X reference - A one-page straight-forward explanation and reference to E4X

AJAX and scripting Web services with E4X - A tutorial from IBM's developerworks site. A good starting point for familiarizing yourself with E4X

Jon Udell: Introduction to E4X - Another tutorial/introduction. This article looks at some of the filtering and search capabilities of E4X not covered in the IBM article.

Adobe ActionScript 3 E4X API/overview - A full, readable reference to the E4X objects and their functionality.

javascript.faqts - Not well organized, but packed with details of E4X and how to work with it. In FAQ format, it approaches documentation in question and answer format.

Other Resources

For the sake of completeness, these are other sites I have found that discuss E4X, but are only worth reading if you are looking for more information

Wikipedia: E4X - This site provides an overview, description, and background of E4X, along with a few links, mostly listed here.

W3 Schools E4X Tutorial - This site also has a quick overview of E4X and a comparison to other approaches. It shows some sample code and how to manipulate XML objects, but does not go into detail.

Standard ECMA-357 - The E4X Specification. This highly technical PDF is more geared toward implementing E4X than using it.