1. The interfaces on the DOM are basically the same, but the test shows that the DOM under mozilla is more standard. Even if some methods are the same, there will be some minor differences in IE, but it is irrelevant.
2. In the event model, the difference is relatively large.
E.tar get under mozillais equivalent to event. srcElement under ie, but the details are different. The latter returns an html element.
E.tar get returns a node, that is, a text node. The method can be as follows:
Var trg = e.tar get;
While (trg. nodeType! = 1) trg = trg. parentNode;
E. which in mozilla is equivalent to event. keyCode in ie.
E. layerX, e. layerY, e. pageX, e. pageY...
Look at the http://fason.nease.net/mozilla/dom/ event Section
The event is bound to mozilla with addEventListener and removeEventListener, corresponding to the attachEvent and detatchEvent of ie.
3. document. getElementById is used directly on the object reference. If you want to be compatible with ie4, you can add document. all to judge
Reference of form element should be standard var oInput = document. formName. elements ["input1"]
4. XML applications are more different, because activex is used in IE, and mozilla already has these objects (which must be supported by dom2)
Xmldomdocument: var doc = document. inplementation. createDocument ("", "", null)
Xmlhttp: var req = new XMLHttpRequest ()
5. innerText is not supported by mozilla. You need to use the range technique to obtain its text.
6. insertAdjacentHTML is a good method. mozilla can use the DOM method insertBefore for compatibility.
7. more subtle methods, such as Array and Date, also have some minor differences between ie and mozilla...
Two examples are written:
1. For objects retrieved by ID
Function getObjectById (id)
{
If (typeof (id )! = "String" | id = "") return null;
If (document. all) return document. all (id );
If (document. getElementById) return document. getElementById (id );
Try {return eval (id);} catch (e) {return null ;}
}
2. Add processing functions to the event
If (document. attachEvent)
Window. attachEvent ("onresize", function () {reinsert ();});
Else
Window. addEventListener ('resize', function () {reinsert () ;}, false );
Note that onclick is used in IE, while click is used in firefox NS.
Submit with Script
Document. formName. action = "...";
Document. formName. submit ();
It seems that it cannot be used in mozilla.
XML Processing Method
Copy codeThe Code is as follows:
Var FCKXml = function ()
{}
FCKXml. prototype. GetHttpRequest = function ()
{
If (window. XMLHttpRequest) // Gecko
Return new XMLHttpRequest ();
Else if (window. ActiveXObject) // IE
Return new ActiveXObject ("MsXml2.XmlHttp ");
}
FCKXml. prototype. LoadUrl = function (urlToCall, asyncFunctionPointer)
{
Var oFCKXml = this;
Var bAsync = (typeof (asyncFunctionPointer) = 'function ');
Var oXmlHttp = this. GetHttpRequest ();
OXmlHttp. open ("GET", urlToCall, bAsync );
If (bAsync)
{
OXmlHttp. onreadystatechange = function ()
{
If (oXmlHttp. readyState = 4)
{
OFCKXml. DOMDocument = oXmlHttp. responseXML;
AsyncFunctionPointer (oFCKXml );
}
}
}
OXmlHttp. send (null );
If (! BAsync & oXmlHttp. status & oXmlHttp. status = 200)
This. DOMDocument = oXmlHttp. responseXML;
Else
Throw ('error loading "'+ urlToCall + '"');
}
FCKXml. prototype. SelectNodes = function (xpath, contextNode)
{
If (document. all) // IE
{
If (contextNode)
Return contextNode. selectNodes (xpath );
Else
Return this. DOMDocument. selectNodes (xpath );
}
Else // Gecko
{
Var aNodeArray = new Array ();
Var xPathResult = this. DOMDocument. evaluate (xpath, contextNode? ContextNode: this. DOMDocument,
This.DOMDocument.createNSResolver(this.DOMDocument.doc umentElement), XPathResult. ORDERED_NODE_ITERATOR_TYPE, null );
If (xPathResult)
{
Var oNode = xPathResult. iterateNext ();
While (oNode)
{
ANodeArray [aNodeArray. length] = oNode;
ONode = xPathResult. iterateNext ();
}
}
Return aNodeArray;
}
}
FCKXml. prototype. SelectSingleNode = function (xpath, contextNode)
{
If (document. all) // IE
{
If (contextNode)
Return contextNode. selectSingleNode (xpath );
Else
Return this. DOMDocument. selectSingleNode (xpath );
}
Else // Gecko
{
Var xPathResult = this. DOMDocument. evaluate (xpath, contextNode? ContextNode: this. DOMDocument,
This.DOMDocument.createNSResolver(this.DOMDocument.doc umentElement), 9, null );
If (xPathResult & xPathResult. singleNodeValue)
Return xPathResult. singleNodeValue;
Else
Return null;
}
}