Accessing XML children

Accessing XML Children

Normal JavaScript Objects use the . operator or [] notation to set properties.

var a = {};
a.foo = 1;
a["bar"] = 2;

In E4X, the . and [] operators provide access to the child nodes of an E4X element.

var element1 = <foo>
                 <bar/>
               </foo>;
var element2 = <baz/>;
element1.bar.appendChild(element2);
element1["bar"].appendChild(<quux/>);

adds a child to the "bar" child node of element1. This gives an XML document of

<foo>
  <bar>
    <baz/>
    <quux/>
  </bar>
</foo>

Note, however, that assigning a non-XML value to a child element that doesn't exist will create that element.

var element1 = <foo/>
element1.bar = 1;

produces

<foo>
  <bar>1</bar>
</foo>

If the child node already exists, the . operator allows you to change its value.

var elem = <foo>
             <bar>1</bar>
           </foo>
elem.bar = 2;

will replace the previous value of 1 with 2.

You can remove a child node by using the delete command:

var elem = <foo>
             <bar/>
             <baz/>
           </foo>
delete elem.bar;

leaves just

<foo>
  <baz/>
</foo>

The . operator can also be used to replace particular child nodes

 var elem1 = <foo>
               <bar/>
             </foo>;
 var elem2 = <red>
               <blue/>
             </red>;
 elem1.bar = elem2;

replaces the <bar/> element with all of the content in elem2, giving:

<foo>
  <red>
    <blue/>
  </red>
<foo>

XML Lists

Many times, however, a single element will have two or more children of the same type. In this case, accessing foo.bar will return an XML list object, of all child elements of the type "bar". IMPORTANT It is your responsibility to determine whether you have an XML list or a single element when using the . operator. E4X behaves no differently when returning these properties.

The XML list behaves much like an array.

var element = <foo>
                <bar baz="1">red</bar>
                <bar baz="2">blue</bar>
              </foo>;
var list = element.bar;
list.length(); // returns 2
list[0]; // the first bar element
list[1]; // the second bar element

Notice further that this list is "live" in the sense that changes made to the list are reflected back in the element that the list originally came from.

 list[1] = "green";

changes the XML document to read

<foo>
  <bar baz="1">red</bar>
  <bar baz="2">green</bar>
</foo>

Special types of nodes

XML objects have methods for accessing XML lists of certain common types of nodes as well.

var a = <foo> Some text <bar>not text</bar> More text </foo>;
var list = a.text();
list.length(); // returns 2
list[0]; // returns " Some text "
list[1]; // returns " More text "

You can similarly access comment nodes:

XML.ignoreComments = false;
var a = <foo> Some  <!-- abc --> text </foo>;
var comments = a.comments();
alert(comments[0]); // Returns <!-- abc -->

The * selector will return all child nodes in an XML list.

var a = <foo>
          <bar/>
          <baz/>
        </foo>;
var list = a.*;
list.length(); // returns 2

Element attributes

Many XML elements have attributes with particular values assigned to them. For instance

<pets>
  <dog color="brown">Fido</dog>
  <cat color="grey">Fluffy</cat>
</pets>

E4X allows you to access the attributes of a particular element with the .@ operator. The most basic case would look something like.

 var element = <foo bar="1"/>
 element.@bar = 2;

which gives

<foo bar="2"/>