IE Firefox General dom

To write JavaScript code that is compatible with mainstream browsers, you need to pay attention to their differences. The general Dom that IE and FF comprehensively consider is below!

1.doc ument. formname. Item ("itemname ")

Description: You can use document. formname. item ("itemname") or document. formname. elements ["elementname"]; In Firefox, only document. formname. elements ["elementname"].
Solution: Use document. formname. elements ["elementname"].

2. Collection class Object Problems

Note: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.
Solution: use [] to retrieve collection class objects.

3. Custom Attributes

Note: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getattribute () to obtain Custom Attributes. In Firefox, you can only use getattribute () obtain custom attributes.
Solution: getattribute () is used to obtain custom attributes.

4. eval ("idname") Problems

Note: in IE, you can use eval ("idname") or getelementbyid ("idname") to obtain the HTML object whose ID is idname. In Firefox, you can only use getelementbyid ("idname ") to obtain the HTML object whose ID is idname.
Solution: getelementbyid ("idname") is used to retrieve the HTML object whose ID is idname.

5. The variable name is the same as the ID of an HTML object.

Note: In ie, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; in Firefox, it cannot. in Firefox, you can use the same variable name as the HTML Object ID; in IE, you cannot.
Solution: Use document. getelementbyid ("idname") replaces document. idname. we recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add VaR to avoid ambiguity.

6. Const Problems

Note: In Firefox, you can use the const keyword or var keyword to define constants. in IE, you can only use the VaR keyword to define constants.
Solution: Use the VaR keyword to define constants.

7. Input. Type attribute Problems

Description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.

8. Window. Event Problems

Note: window. event can only be run in IE, but not in Firefox, because Firefox Event can only be used in the event.
Solution:
IE:
<Input name = "button8_1" type = "button" value = "ie" onclick = "javascript: gotosubmit8_1 ()"/>
...
<Script language = "JavaScript">
Function gotosubmit8_1 (){
...
Alert (window. Event); // use window. Event
...
}
</SCRIPT>
IE & Firefox:
<Input name = "button8_2" type = "button" value = "ie" onclick = "javascript: gotosubmit8_2 (event)"/>
...
<Script language = "JavaScript">
Function gotosubmit8_2 (EVT ){
...
EVT = EVT? EVT :( window. event? Window. Event: NULL );
Alert (EVT); // use EVT
...
}
</SCRIPT>

9. event. X and event. Y

Note: In ie, the even object has the X and Y attributes, but does not have the pagex and Pagey attributes. In Firefox, the even object has the pagex and Pagey attributes, but does not have the X and Y attributes.
Solution: Use MX (MX = event. X? Event. X: event. pagex;) to replace event. X in IE or event. pagex in Firefox.

10. event. srcelement Problems

Note: In ie, the even object has the srcelement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcelement attribute.
Solution: Use OBJ (OBJ = event. srcelement? Event. srcelement: event.targettoken used to replace event.tar get under firefox.

11. Window. Location. href

Note: in IE or firefox2.0.x, you can use window. Location or window. Location. href; In firefox1.5.x, you can only use window. location.
Solution: Use window. location to replace window. Location. href.

12. Modal and non-modal window Problems

Note: in IE, you can use showmodaldialog and showmodelessdialog to open modal and non-modal windows; in Firefox, no.
Solution: Use window. Open (pageurl, name, parameters) to open a new window. If you want to pass the parameters in the Child window back to the parent window, you can use window in the Child Window. opener to access the parent window. for example, VAR parwin = Window. opener; parwin.doc ument. getelementbyid ("aqing "). value = "aqing ";

13. Frame Problems

The following frame is used as an example:
<Frame src = "xxx.html" id = "frameid" name = "framename"/>

(1) access the frame object:
IE: Use window. frameid or window. framename to access this frame object.
Firefox: only window. framename can be used to access this frame object.
In addition, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getelementbyid ("frameid.

(2) Switch frame content:
In both ieand firefox, you can use Upload upload Doc ument. getelementbyid ("testframe"). src = "xxx.html" or window. framename. Location = "xxx.html" to switch frame content.

If you want to return parameters in the frame to the parent window, you can use parent in frme to access the parent window. Example: parent.doc ument. form1.filename. value = "aqing ";

14. Body Problems

The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully read by the browser.

For example:
Firefox:
<Body>
<SCRIPT type = "text/JavaScript">
Document. Body. onclick = function (EVT ){
EVT = EVT | window. event;
Alert (EVT );
}
</SCRIPT>
</Body>
IE & Firefox:
<Body>
</Body>
<SCRIPT type = "text/JavaScript">
Document. Body. onclick = function (EVT ){
EVT = EVT | window. event;
Alert (EVT );
} </SCRIPT>

15. Event delegation Method

IE: Document. Body. onload = inject; // function inject () has been implemented before this
Firefox: Document. Body. onload = inject ();
Some people say the standard is:
Document. Body. onload = new function ('inject ()');

16. Differences between Firefox and IE (parentelement) parent Elements

IE: obj. parentelement
Firefox: obj. parentnode
Solution: because both Firefox and IE support DOM, using obj. parentnode is a good choice.

17. cursor: hand vs cursor: pointer

Firefox does not support hand, But ie supports pointer
Solution: Use Pointer

18. innertext works normally in IE, but innertext does not work in Firefox.

Solution:
If (navigator. appname. indexof ("Explorer")>-1 ){

Document. getelementbyid ('element'). innertext = "My text ";

} Else {

Document. getelementbyid ('element'). textcontent = "My text ";

}

19. The statement similar to OBJ. style. Height = imgobj. Height in Firefox is invalid.

Solution:
OBJ. style. Height = imgobj. height + 'px ';

20. IE, Firefox, and other browsers have different operations on table labels. in IE, assigning values to innerhtml of table and TR is not allowed. When adding a Tr using JS, the appendchile method does not work.

Solution:
// Append an empty row to the table:
VaR ROW = otable. insertrow (-1 );
VaR cell = Document. createelement ("TD ");
Cell. innerhtml = "";
Cell. classname = "XXXX ";
Row. appendchild (cell );

21. Padding Problems

Padding 5px 4px 3px 1px Firefox cannot be abbreviated. It must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px; padding-left: 1px;

22. When the indentation of UL and ol lists is eliminated

Style should be written as: List-style: none; margin: 0px; padding: 0px;
The margin attribute is valid for IE and the padding attribute is valid for Firefox.

23. Transparent CSS

IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.

24. CSS rounded corners

IE: rounded corners are not supported.
FF:-moz-border-radius: 4px, or-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px; -Moz-border-radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px ;.

25. CSS double-line concave and convex border

IE: Border: 2px outset ;.
FF:-moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8 white;-moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080;

Internet Explorer is replaced with IE, and mozzila Firefox is replaced with MF or ff.
1: innertext
Supported by IE, not supported by Firefox
Solution: Use innerhtml and both browsers to recognize innerhtml

2: Document. createelement
Document. appendchild
Insert rows into the table
Supported by Firefox, not supported by IE
Solution: Insert rows into the tbody instead of the table.

3: setattribute ('style', 'color: red ;')
Supported by Firefox (except IE, supported by all browsers now), not by IE
Solution: Do not use setattribute ('style', 'color: red ')
Use object.style.css text = 'color: red; '(this is also an exception)
The best way is to use the above methods.
4: Class
Setattribute ('class', 'styleclass ')
Supported by Firefox and not supported by IE (if the attribute is specified as class, ie will not set the class attribute of the element. On the contrary, ie will automatically identify the classname attribute only when setattribute is used)
Solution:
Setattribute ('class', 'styleclass ')
Setattribute ('classname', 'styleclass ')
Both use (Note: Both IE and FF support object. classname)

5: Use setattribute to set events
VaR OBJ = Document. getelementbyid ('objid ');
OBJ. setattribute ('onclick', 'funcitonname ();');
Supported by Firefox, not supported by IE
Solution:
In IE, you must use the vertex method to reference the required event handler and assign the anonymous Function
As follows:
VaR OBJ = Document. getelementbyid ('objid ');
OBJ. onclick = function () {fucntionname ();};
All browsers support this method.

6. Create a radio button.
Browsers other than IE
VaR rdo = Document. createelement ('input ');
Rdo. setattribute ('type', 'Radio ');
Rdo. setattribute ('name', 'radiobtn ');
Rdo. setattribute ('value', 'checked ');

IE:
VaR rdo = Document. createelement ("<input type = 'Radio 'name = 'radiobtn' value = 'checked'> ");
Solution:
The difference is different from the previous one. This time is completely different, so we cannot find a common solution, so only if-else is available.
Fortunately, ie can identify the uniqueid attribute of the document. other browsers cannot recognize this attribute. Solve the problem.

0: common skills
When dynamically creating Input elements, we usually add them first and set the type. This may cause errors.

Good Habit: var BTN = Document. createelement ('input ');
BTN. setattribut ('type', 'click ');
Document. getelementbyid ('formid '). appendchild (BTN );

========================================================== ========================================================== =
1. Document. Form. Item Problems
(1) existing problems:
Many statements such as document. formname. Item ("itemname") exist in the existing code and cannot be run in MF.
(2) solution:
Use document. formname. elements ["elementname"]
(3) Others
See 2

2. Collection class Object Problems
(1) existing problems:
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.
(2) solution:
Use [] as the subscript operation. For example, change document. Forms ("formname") to document. Forms ["formname"].
For example, change document. getelementsbyname ("inputname") (1) to document. getelementsbyname ("inputname") [1]
(3) Others

3. Window. Event
(1) existing problems:
Window. event cannot be run on MF.
(2) solution:
Mf events can only be used in the event. This problem cannot be solved. This can be changed as follows:
Original code (can be run in IE ):
<Input type = "button" name = "somebutton" value = "Submit" onclick = "Java Script: gotosubmit ()"/>
...
<Script language = "JavaScript">
Function gotosubmit (){
...
Alert (window. Event); // use window. Event
...
}
</SCRIPT>

New Code (run in IE and MF ):
<Input type = "button" name = "somebutton" value = "Submit" onclick = "Java Script: gotosubmit (event)"/>
...
<Script language = "JavaScript">
Function gotosubmit (EVT ){
EVT = EVT? EVT: (window. event? Window. Event: NULL );
...
Alert (EVT); // use EVT
...
}
</SCRIPT>
In addition, if the first line of the new Code is not modified, it is the same as the old code (that is, the gotosubmit call does not provide a parameter), it can only be run in IE, but no error occurs. Therefore, the TPL part of this solution is still compatible with the old code.

4. Question about the ID of an HTML object as the object name
(1) Existing Problems
In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.
(2) Solution
Use getelementbyid ("idname") instead of idname as the object variable.

5. The problem of getting an object using the idname string
(1) Existing Problems
In IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF.
(2) Solution
Use getelementbyid (idname) instead of eval (idname ).

6. The variable name is the same as the ID of an HTML object.
(1) Existing Problems
In MF, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be used in IE.
(2) Solution
When declaring variables, add VaR to avoid ambiguity, so that it can run normally in IE.
In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.
(3) Others
See question 4

7. event. X and event. Y
(1) Existing Problems
In ie, the event object has the X and Y attributes, and MF does not.
(2) Solution
In MF, event. X is equivalent to event. pagex. But event. pagex IE does not.
Therefore, event. clientx is used instead of event. X. This variable is also available in IE.
Event. clientx is slightly different from event. pagex (when the page has a scroll bar), but most of the time it is equivalent.

If it is the same, it may be a little troublesome:
MX = event. X? Event. X: event. pagex;
Use MX instead of event. x
(3) Others
Event. layerx is available in both IE and MF. There is no difference in the specific significance of this function.

8. About Frame
(1) Existing Problems
In ie, the frame can be obtained using window. testframe, but not in MF.
(2) Solution
The main difference between MF and IE in frame usage is:
If the following attributes are written in the frame tag:
<Frame src = "xx.htm" id = "frameid" name = "framename"/>
Then Ie can access the window object corresponding to this frame through ID or name.
However, MF can only access the window object corresponding to this frame through name.
For example, if the above frame label is written in the HTM in the top window, you can access
IE: window. Top. frameid or window. Top. framename to access this window object
Mf: only window. Top. framename can access this window object.

In addition, both mfand iecan use javasdesktop.doc ument. getelementbyid ("frameid") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getelementbyid ("testframe"). src = 'xx.htm '.
You can also switch the frame content through window. Top. framename. Location = 'xx.htm '.
For details about frame and window, see the 'window and framework' article in BBS.
And the tests under the/test/JS/test_frame/directory

9. In MF, attributes defined by myself must be obtained by getattribute ().
10. If there is no parentelement parement. Children in MF, use
Parentnode. childnodes
Childnodes has different meanings in IE and MF. MF uses Dom specifications, and blank text nodes are inserted in childnodes.
You can avoid this problem by using node. getelementsbytagname.
When a node in HTML is missing, ie and MF have different interpretations of parentnode, for example
<Form>
<Table>
<Input/>
</Table>
</Form>
In MF, the value of input. parentnode is form, while that of input. parentnode in IE is empty.

The node in MF does not have the removenode method. You must use the following method: node. parentnode. removechild (node)

11. Const Problems
(1) existing problems:
You cannot use the const keyword in IE. For example, const constvar = 32; in IE, This Is A syntax error.
(2) solution:
Use VaR instead of Const.

12. Body object
The MF body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.

13. url Encoding
In JS, if the URL is written, write directly & do not write & for example, VAR url = 'xx. jsp? Objectname = XX & objectevent = XXX ';
FRM. Action = URL, so it is very likely that the URL will not be properly displayed, so that the parameter is not correctly transmitted to the server.
Generally, the server reports that the error parameter is not found.
Of course, if it is an exception in TPL, because TPL complies with the XML specification, the requirements are as follows &
Generally, MF cannot identify

14. nodename and tagname Problems
(1) existing problems:
In MF, all nodes have a nodename value, but textnode does not have a tagname value. In IE, nodename usage seems to be
There is a problem (the test is not performed, but my IE has been killed several times ).
(2) solution:
Use tagname, but check whether it is empty.

15. Element attributes
The input. Type attribute in IE is read-only, but can be modified in MF.

16. Document. getelementsbyname () and document. All [name] Problems
(1) existing problems:
In IE, neither getelementsbyname () nor document. All [name] can be used to obtain the DIV element (whether there are other elements that cannot be retrieved is unknown ).

========================================================== ========================================================== ======================================
1. append rows to the table
This is the code supported by IE, Firefox, Safari, and opera.
VaR cell = documentcreateelement ("TD"). appendchild (document. createtextnode ("foo "));
VaR ROW = Document. createelement ("TR"). appendchild (cell );
Document. getelementbyid ("mytableboyd"). appendchild (ROW );
Alternatively, add tbody to the parent node of TR. (Note: In IE, when using Dom to dynamically Add rows to a table, tbody must be added to the upper layer of TR; otherwise, tbody cannot be displayed after dynamic addition)

2. Set the element style through JavaScript
VaR spanelement = Document. getelementbyid ("myspan ");
// Spanelement. setattribute ("style", "font-weight: bold; color: Red"); // a browser other than IE
Spanelement.style.css text = "font-weight: bold; color: Red"; // The method of IE csstext is not a standard attribute, but is supported by IE.

3. Add the option compatibility operation to IE and ff. paste your code here (Note: FF supports embedding the Option List directly into the select node in the form of innerhtml, but IE does not)
Function removealloptions (select_id ){
VaR COM = Document. getelementbyid (select_id );
VaR Len = com. Options. length;
For (VAR I = 0; I <Len; I ++ ){
Com. Remove (0 );
}
}
Function addoption (e_select, value, text ){
VaR ooption = Document. createelement ("option ");
E_select.options.add (ooption );
If (text! = NULL ){
VaR text_node = Document. createtextnode (text );
Ooption. appendchild (text_node );
}
If (value! = NULL ){
Ooption. value = value;
}
}

4. Create input elements (Common Code)
VaR button = Document. createelement ("input ");
Button. setattribute ("type", "button ");
Document. getelementbyid ("form"). appendchild (button );

5. Add an event handler (Common Code) to the input element)
VaR element = Document. getelementbyid ("ee ");
Element. onclick = function () {todo ();};

6. Create a radio button
VaR ration = Document. createelement ("<input type = 'Radio 'name = 'radionsss' value = 'checked'>"); // IE
// Non-ie Creation Method
VAT radion = Document. createelement ("input ");
Radion. setattribute ("type", "radio ");
Radion. setattribute ("name", "radionsss ");
Radion. setattribute ("value", "checked ");