JavaScript and XML : Page 4 | JavaScript: The Definitive Guide, Fifth Edition

The previous section showed a number of ways to obtain parsed XML data in the form of a Document object. The Document object is defined by the W3C DOM API and is much like the HTMLDocument object that is referred to by the document property of the web browser.

The following subsections explain some important differences between the HTML DOM and the XML DOM and then demonstrate how you can use the DOM API to extract data from an XML document and display that data to a user by dynamically creating nodes in the browser's HTML document.

21.2.1 XML Versus HTML DOM

Chapter 15 explained the W3C DOM but focused on its application in client-side JavaScript to HTML documents. In fact, the W3C designed the DOM API to be language-neutral and focused primarily on XML documents; its use with HTML documents is through an optional extension module. In Part IV, notice that there are separate entries for Document and HTMLDocument, and for Element and HTMLElement. HTMLDocument and HTMLElement are extensions of the core XML Document and Element objects. If you are used to manipulating HTML documents with the DOM, you must be careful not to use HTML-specific API features when working with XML documents.

Probably the most important difference between the HTML and XML DOMs is that the getElementById() method is not typically useful with XML documents. In DOM Level 1, the method is actually HTML-specific, defined only by the HTML Document interface. In DOM Level 2, the method is moved up a level to the Document interface, but there is a catch. In XML documents, getElementById() searches for elements with the specified value of an attribute whose type is "id". It is not sufficient to define an attribute named "id" on an element: the name of the attribute does not matter—only the type of the attribute. Attribute types are declared in the DTD of a document, and a document's DTD is specified in the DOCTYPE declaration. XML documents used by web applications often have no DOCTYPE declaration specifying a DTD, and a call to getElementById() on such a document always returns null. Note that the getElementsByTagName() method of the Document and Element interfaces works fine for XML documents. (Later in the chapter, I'll show you how to query an XML document using powerful XPath expressions; XPath can be used to retrieve elements based on the value of any attribute.)

Another difference between HTML and XML Document objects is that HTML documents have a body property that refers to the <body> tag within the document. For XML documents, only the documentElement property refers to the top-level element of the document. Note that this top-level element is also available through the childNodes[] property of the document, but it may not be the first or only element of that array because an XML document may also contain a DOCTYPE declaration, comments, and processing instructions at the top level.

There is also an important difference between the XML Element interface and the HTMLElement interface that extends it. In the HTML DOM, standard HTML attributes of an element are made available as properties of the HTMLElement interface. The src attribute of an <img> tag, for example, is available through thesrc property of the HTMLImageElement object that represents the <img> tag. This is not the case in the XML DOM: the Element interface has only a singletagName property. The attributes of an XML element must be explicitly queried and set withgetAttribute(), setAttribute(), and related methods.

As a corollary, note that special attributes that are meaningful on any HTML element are meaningless on all XML elements. Recall that setting an attribute named "id" on an XML element does not mean that that element can be found with getElementById(). Similarly, you cannot style an XML element by setting its style attribute. Nor can you associate a CSS class with an XML element by setting its class attribute. All these attributes are HTML-specific.

21.2.2 Example: Creating an HTML Table from XML Data

Example 21-7 defines a function named makeTable() that uses both the XML and HTML DOMs to extract data from an XML document and insert that data into an HTML document in the form of a table. The function expects a JavaScript object literal argument that specifies which elements of the XML document contain table data and how that data should be arranged in the table.

Before looking at the code for makeTable(), let's first consider a usage example. Example 21-6 shows a sample XML document that's used here (and elsewhere throughout this chapter).

The following HTML fragment shows how the makeTable() function might be used with that XML data. Note that the schema object refers to tag and attribute names from this sample datafile:

/**
 * Extract data from the specified XML document and format it as an HTML table.
 * Append the table to the specified HTML element. (If element is a string,
 * it is taken as an element ID, and the named element is looked up.)
 *
 * The schema argument is a JavaScript object that specifies what data is to
 * be extracted and how it is to be displayed. The schema object must have a
 * property named "rowtag" that specifies the tag name of the XML elements that
 * contain the data for one row of the table. The schema object must also have
 * a property named "columns" that refers to an array. The elements of this
 * array specify the order and content of the columns of the table. Each
 * array element may be a string or a JavaScript object. If an element is a
 * string, that string is used as the tag name of the XML element that contains
 * table data for the column, and also as the column header for the column.
 * If an element of the columns[] array is an object, it must have one property
 * named "tagname" and one named "label". The tagname property is used to
 * extract data from the XML document and the label property is used as the
 * column header text. If the tagname begins with an @ character, it is
 * an attribute of the row element rather than a child of the row.
 */
function makeTable(xmldoc, schema, element) {
    // Create the <table> element
    var table = document.createElement("table");
    // Create the header row of <th> elements in a <tr> in a <thead>
    var thead = document.createElement("thead");
    var header = document.createElement("tr");
    for(var i = 0; i < schema.columns.length; i++) {
        var c = schema.columns[i];
        var label = (typeof c == "string")?c:c.label;
        var cell = document.createElement("th");
        cell.appendChild(document.createTextNode(label));
        header.appendChild(cell);
    }
    // Put the header into the table
    thead.appendChild(header);
    table.appendChild(thead);
    // The remaining rows of the table go in a <tbody>
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);
    // Now get the elements that contain our data from the xml document
    var xmlrows = xmldoc.getElementsByTagName(schema.rowtag);
    // Loop through these elements. Each one contains a row of the table.
    for(var r=0; r < xmlrows.length; r++) {
        // This is the XML element that holds the data for the row
        var xmlrow = xmlrows[r];
        // Create an HTML element to display the data in the row
        var row = document.createElement("tr");
        // Loop through the columns specified by the schema object
        for(var c = 0; c < schema.columns.length; c++) {
            var sc = schema.columns[c];
            var tagname = (typeof sc == "string")?sc:sc.tagname;
            var celltext;
            if (tagname.charAt(0) == '@') {
                // If the tagname begins with '@', it is an attribute name
                celltext = xmlrow.getAttribute(tagname.substring(1));
            }
            else {
                // Find the XML element that holds the data for this column
                var xmlcell = xmlrow.getElementsByTagName(tagname)[0];
                // Assume that element has a text node as its first child
                var celltext = xmlcell.firstChild.data;
            }
            // Create the HTML element for this cell
            var cell = document.createElement("td");
            // Put the text data into the HTML cell
            cell.appendChild(document.createTextNode(celltext));
            // Add the cell to the row
            row.appendChild(cell);
        }
        // And add the row to the tbody of the table
        tbody.appendChild(row);
    }
    // Set an HTML attribute on the table element by setting a property.
    // Note that in XML we must use setAttribute() instead.
    table.frame = "border";
    // Now that we've created the HTML table, add it to the specified element.
    // If that element is a string, assume it is an element ID.
    if (typeof element == "string") element = document.getElementById(element);
    element.appendChild(table);
}

JavaScript and XML

21.2 Manipulating XML with the DOM API

21.2.1 XML Versus HTML DOM

21.2.2 Example: Creating an HTML Table from XML Data

This excerpt is taken from Chapter 21 of JavaScript: The Definitive Guide, Fifth Edition, published by O'Reilly Media, Inc., Copyright © 2006, 2002, 1998, 1997, 1996 O'Reilly Media, Inc. All rights reserved.