WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / programming / javascript / domwrapper

[previous] [next]

A Cross-Browser DOM Document Wrapper

Developer News OpenOffice 3.2 Lands Amid Critical Changes Red Hat, IBM Firmly in KVM Virtualization Camp Red Hat Talks Up Open Source Cloud Plans

Making Interfaces Play Together

We have just finished our common creation method for a DOM Document, but we are not done yet. While both the IE and Mozilla interfaces have the same standards-compliant attributes and methods, both have also added proprietary attributes and methods that we need in order to protect the future of our interface.

The load() and loadXML() Methods

To begin, both IE and Mozilla support a proprietary load() method, which allows developers to load an XML document via HTTP in the following way:

objDOM.load("http://www.nczonline.net/test.xml");

IE adds the additional loadXML() method (which we used earlier). The loadXML() method allows the developer to pass in an XML string to load into the DOM Document. Mozilla doesn't provide a simple way to pass in an XML string, but we can create our own loadXML() method for the Mozilla version.

The name of the DOM Document class in Mozilla is simply called Document. We can extend the Document class just as we can extend any other native JavaScript class. So, we will check for Mozilla, and then extend the Document class to add the loadXML() method:

if (isMoz) {

    //add the loadXML() method to the Document class
    Document.prototype.loadXML = function(strXML) {
    
    }
}

But how can we take the XML string and get it parsed into a DOM Document? Mozilla provides the DOMParser class to do just this. The DOMParser class is part of the XMLExtras module of Mozilla (click here for more information) and has a method called parseFromString() that will take an XML string and a content-type (in our case, "text/xml") and produce a Document object.

First, let's add in the DOMParser:

if (isMoz) {
    
  //add the loadXML() method to the Document class
  Document.prototype.loadXML = function(strXML) {
        
    //create a DOMParser
    var objDOMParser = new DOMParser();
        
    //create new document from string
    var objDoc = objDOMParser.parseFromString(strXML, "text/xml");
 
  } //End: function
} //End: if

The additional problem for us is how to transfer the data in the Document object produced by the DOMParser into the current Document. We need to be sure to clear the Document of all data already in it. To do this, we need to remove every top-level child node of the Document, like so:

//make sure to remove all nodes from the document
while (this.hasChildNodes())
  this.removeChild(this.lastChild);

Now that the Document is cleared of data, we need to add in the data from the DOMParser Document. To do this, we need to iterate through all of the top-level nodes of the DOMParser Document. Then, we need to add each of those nodes into the current Document. The added wrinkle is that you cannot add a node from one Document object into another directly. You need to first import the node into the Document, using the importNode() method and then add the node into the current Document.

The importNode() method takes two parameters: the node to import, and a boolean indicating if the node's children should also be imported. Since we want to copy all of the data, we set the boolean to true. This method returns the imported node, which then can be added into the current Document. This is done as follows:

//add the nodes from the new document
for (var i=0; i < objDoc.childNodes.length; i++) {
            
  //import the node
  var objImportedNode = this.importNode(objDoc.childNodes[i], true);
            
  //append the child to the current document
  this.appendChild(objImportedNode);
        
} //End: for

We can now use the loadXML() method in both IE and Mozilla, which will make many people happy.

The xml Attribute

Microsoft provided the loadXML() method to allow the developer to input an XML string into a DOM Document. Likewise, they provided a way to get that XML string back. The xml attribute of the DOM Document will return the complete XML string being represented by the DOM Document. The xml attribute is also on every node in the DOM Document in order to return XML from any specific location in the DOM Document. This is the natural complement to the loadXML() method, so let's add it into the Mozilla interface.

Normally, if you wanted to add an attribute to a class, you would do it as follows:

Document.prototype.xml = "";

However, in this case, we won't be doing that. Instead, we will define an attribute "getter;" or the function that is called when a developer tries to get the value of an attribute. Doing this will automatically create the attribute for the class.

An important point to make before going on is that we want the xml attribute to be on every node in the Document, as well as on the Document itself. To do this, we could add the xml attribute on the Document and Element classes, which is not optimal. The other option is to just add the xml attribute to the Node class. Every type of node in a DOM Document, whether it is Document, Element, or anything else, is inherited from the Node class. So, we will just add the xml attribute to the Node class, and all of the others will automatically inherit it.

Adding a getter is done using the hidden method __defineGetter__(). The __defineGetter__() method takes two parameters: a string indicating the attribute to watch and a function to call when the attribute is accessed. Let's assume we will define a function called _Node_getXML() to handle this, so we will define the getter for the Node as follows:

Node.prototype.__defineGetter__("xml", _Node_getXML);

Now, all that is left is to create the _Node_getXML() function. In order to convert a Node to an XML string, Mozilla provides an XMLSerializer class. The XMLSerializer has a method called serializeToString(), which takes a Node (which is what both Element and Document are extended from) and returns the XML string representing the Node. Our function will use the XMLSerializer and pass in this (for those unaware, this represents the object that is calling the method). The XML string must then be returned:

function _Node_getXML() {
    
    //create a new XMLSerializer
    var objXMLSerializer = new XMLSerializer;
    
    //get the XML string
    var strXML = objXMLSerializer.serializeToString(this);
    
    //return the XML string
    return strXML;
}

Now, the Mozilla interface can use the xml attribute in the same way that IE uses it.

home / programming / javascript / domwrapper

[previous] [next]

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

Created: June 13, 2002
Revised: June 13, 2002

URL: http://webreference.com/programming/javascript/domwrapper/3.html