Accessing Element Children With the . Operator

You can use the . (dot) operator to construct a path to an element just as you would specify a member of a collection object. The . operator examines the children of its left operand and returns those with names that match its right operand. It returns them in the order in which they appear in the document.

The following example illustrates using the . operator to return a single value or an element.

    /* Declare an XML variable with a literal XML value. */
    var xmlEmployees = <employees>
        <employee id="111111111">
            <firstname>John</firstname>
            <lastname>Walton</lastname>
            <age>25</age>
        </employee>
        <employee id="222222222">
            <firstname>Sue</firstname>
            <lastname>Day</lastname>
            <age>32</age>
        </employee>
    </employees>;
    /*
     * Return the first name of the first employee in the list.
     * This code returns an XMLList type containing "John".
     */
    var name = xmlEmployees.employees.employee[0].firstname;
    /*

     * Return the first <employee> element.
     * This code returns an XML type with all of the first <employee> element:
     *    <employee id="111111111">
     *        <firstname>John</firstname>
     *        <lastname>Walton</lastname>
     *        <age>25</age>
     *    </employee>
     */
    var firstEmployee = xmlEmployees.employees.employee[0];

Using the . operator to specify a repeating element will return an XMLList with multiple items, as in the following example.

    /*
     * Return all of the <employee> elements.
     * This code returns an XMLList containing the following:
     *    <employee id="111111111">
     *        <firstname>John</firstname>
     *        <lastname>Walton</lastname>
     *        <age>25</age>
     *    </employee>
     *    <employee id="222222222">
     *        <firstname>Sue</firstname>
     *        <lastname>Day</lastname>
     *        <age>32</age>
     *    </employee>
     */
    var employees = xmlEmployees.employees.employee;

You can also assign new values using the . operator, as in the following example.

    /*
     * Change John's name to Biff.
     */
    xmlEmployees.employees.employee[0].firstname = "Biff";
    /*
     * Set the entire first <employee> element to a new value.
     */
    xmlEmployees.employees.employee[0] = <employee id="111111111">
        <first>Armin</first>

        <last>HooHaw</last>

        <age>91</age>

    </employee>;

When elements have names that conflict with ECMAScript keywords or function names, you can use the following syntax instead. Note that there are two different workarounds — one is for use with ECMAScript keywords and the other is for use with function names.

    /*
     * Return all of the <if> elements.
     * This avoids a conflict with the "if" ECMAScript keyword.
     */
    var ifs = xmlData.product_description["if"];
    /*
     * Return the first <parent> element.
     * This avoids a conflict with the parent function.
     */
    var firstParent = xmlFamilies.kid.::parent[0];

Related Topics

Accessing Element Descendants with the .. Operator