mozilla
Your Search Results

    Accessing XML children

    Accessing XML Children

    Warning: E4X is deprecated. It will be disabled by default for content in Firefox 16, disabled by default for chrome in Firefox 17, and removed in Firefox 18. Use DOMParser/DOMSerializer or a non-native JXON algorithm instead.

    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"/>
    

    Document Tags and Contributors

    Contributors to this page: Sheppy, Shanefc, Brettz9, kmaglione, Waldo, Jminta
    Last updated by: Sheppy,
    Hide Sidebar