| home / programming / javascript / domwrapper |    [previous] [next] |
|
|
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.
load() and loadXML() MethodsTo 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: ifThe 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: forWe can now use the loadXML() method in both IE and Mozilla, which will make many
people happy.
xml AttributeMicrosoft 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] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: June 13, 2002
Revised: June 13, 2002
URL: http://webreference.com/programming/javascript/domwrapper/3.html
