Some differences between IE and DHTML in Mozilla

Source: Internet
Author: User
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.
And e.tar get returns Node That is to say, the method includes text nodes.
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/moz... 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...

8. to delete an object, use the DOM
VaR P = obj. parentnode;
P. removechild (OBJ );

9. add and delete select options without adding or removing
Http://fason.nease.net/sam...

10. Right-click processing in Mozilla. dom2 supports oncontextmenu and does not need to be determined by E. Which = 2.

11. How does Mozilla handle opacity in IE ??

A:
OBJ. style. Required opacity = 0.5; //. Opacity-CSS {-moz-opacity: 0.5}

12.

In IE, you can directly change the script's SRC by obj. src = "XXX. js". Mozilla doesn't work. You need to remove the script and create another one to take effect.

13. obj. currentstyle. XXX in IE, used in Mozilla
Document. defaultview. getcomputedstyle (OBJ, ''). getpropertyvalue (" XXX ")

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. Additional event handling Function
If (document. attachevent)
Window. attachevent ("onresize", function () {reinsert ();});
Else
Window. addeventlistener ('resize', function () {reinsert () ;}, false );
Note that onclick is used in IE and click is used in Firefox ns!
You can change css ie and Mozilla dynamically.
Set ID for link, Then, set it through scripts.

Reference
{
Function anonymous ()
{
Setstyle ('template/gray/gq.css '); Return false;
}
} "Href =" http://www.myhorde.net/blog/read.php? 53 # "> National Day style
{
Function anonymous ()
{
Setstyle ('template/gray/xmas.css '); Return false;
}
} "Href =" http://www.myhorde.net/blog/read.php? 53 # "> Christmas style
XML Processing Method

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;
}
}
Differences in XML applications
If (IE ){
VaR xmldoc = new activexobject ("Microsoft. xmldom ");
Xmldoc. async = "false ";
Xmldoc. loadxml (xmltext );
}
Else {// Mozilla
VaR parser = new domparser ();
VaR xmldoc = parser. parsefromstring (xmltext, "text/XML ");
}

These are attributes that are not available under Mozilla.

Htmlelement. Prototype. _ definegetter __
(
"Outerhtml ",
Function ()
{
VaR STR = "<" + this. tagname;
For (VAR I = 0; I {
VaR ATTR = This. attributes [I];

STR + = "";
STR + = ATTR. nodename + "=" + '"' + ATTR. nodevalue + '"';
}
STR + = ">" + this. innerhtml + "Return STR;
}
);

Htmlelement. Prototype. _ definesetter __
(
"Innertext ",
Function (anything)
{
This. innerhtml = "";

VaR stext = string (anything );
VaR texts = stext. Split ("/N ");
For (VAR I = 0; I {
VaR txtnode = NULL;
VaR retnode = NULL;

If (texts [I]. length)
Txtnode = Document. createtextnode (texts [I]);

If (I retnode = Document. createelement ("Br ");

If (txtnode)
This. appendchild (txtnode );

If (retnode)
This. appendchild (retnode );
}
}
);

Htmlelement. Prototype. _ definegetter __
(
"Innertext ",
Function ()
{
VaR anystring = "";

VaR Childs = This. childnodes;
For (VAR I = 0; I {
If (Childs [I]. nodetype = 1)
Anystring + = Childs [I]. tagname = "Br "? '/N': Childs [I]. innertext;
Else if (Childs [I]. nodetype = 3)
Anystring + = Childs [I]. nodevalue;
}

Return anystring;
}
);

Htmlelement. Prototype. _ definegetter __
(
"Text ",
Function ()
{
Return this. innertext;
}
);

Mozilla does not support element. customattribute.
Must use setattribute ("customattribute", value), getattribute ("customattribute ")
(This is the most troublesome part)

I wrote this myself. Global Function to add and delete events:

Function attachdomevent (OBJ, name, func)
{
If (obj. attachevent)
OBJ. attachevent ("On" + name, func );
If (obj. addeventlistener)
OBJ. addeventlistener (name, func, true );
}
Function detachdomevent (OBJ, name, func)
{
If (obj. detachevent)
OBJ. detachevent ("On" + name, func );
If (obj. removeeventlistener)
OBJ. removeeventlistener (name, func, true );
}

For example
Attachdomevent (window, "click", handle_click );

Sometimes Mozilla does not recognize the ID of a write element. If you do not want to use getelementbyid, you can add this segment after Code :
If (document. addeventlistener)
{
VaR tagcoll = Document. getelementsbytagname ("*");
For (VAR I = 0; I {
If (tagcoll [I]. ID)
{
Eval ("Var" + tagcoll [I]. ID + "= Document. getelementbyid ('" + tagcoll [I]. ID + "')");
}
}
}
However, this code conflicts with IFRAME/frame.

The most common problems I usually use are:
Table. insertrow (-1 );
Row. insertcell (-1 );

It is also very useful in terms of events, that is, the importance of events. Targeting
Ie5.5 + obj. fireevent (eventname, eventobj)
Use obj. dispatchevent (eventobj) In ns );
In fact, the frequent use of event redirection will cause the browser to crash, especially in NS, so that you can simulate event redirection and triggering by yourself. If you are interested, go to the bindows application. the core code in JS is simple in design.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.