Analysis on compatibility with various Javascript browsers _ javascript skills

With the rise of third-party browsers represented by Firefox, our Website Cannot Be JUSTIE any more. If we put some original javascript code in a browser other than IE, this section describes how to improve JS to make it more standardized and compatible. With the rise of third-party browsers represented by Firefox, our website cannot be just ie any more. If we put some original javascript code in a browser other than IE, this section describes how to improve JS to make it more standardized and compatible.

Sample Code:

 
 
 
 
  
  
 
   
 
    
Do not eat apple
 
   
 
  
 
 
 
 

Try to use W3C DOM

The previously accessed objects may be:
Document. all. apple or apple
Now we should use:
Document. getElementById ("apple") is used to access the object, and an ID must be unique on the page.
Document. getElementsByTagName ("p") [0] access the object by Tag Name

The property of the originally set object may be:
Document. all. apple. width = 100 or apple. width = 100
Now we should use:
Document. getElementById ("apple"). setAttribute ("width", "100 ")
Document. getElementsByTagName ("p") [0]. setAttribute ("width", "100 ")
The properties of the access object are as follows:
Document. getElementById ("apple"). getAttribute ("width ")
Document. getElementsByTagName ("p") [0]. getAttribute ("width ")

W3C DOM restrictions in IE

Because the first IE account for 95% of the total browser, there is no competition pressure, so the boss is hard to play a different way, not fully according to WEB standards.

In IE, you cannot correctly use setAttribute to set the style, class, and Event Response attributes of an object,
Therefore, I have to access and set it according to the original logging method to achieve compatibility with various browsers, such:

Document. getElementById ("banana "). class document. getElementById ("banana "). style. color document. getElementById ("banana "). onclick document. getElementById ("banana "). class = "fruit" document. getElementById ("banana "). style. color = "blue" document. getElementById ("banana "). onclick = function () {alert ("I Am a banana ")}

Onload in Firefox

Function over () {alert ("Page loaded ")}

Normally, the onload response function is:
Document. body. onload = over
But it cannot be executed in Firefox,
Therefore, we all adopt the following form:
Window. onload = over

About the problem that the TABLE cannot Insert a new row in IE

Whether innerHTML or appendChild is used to insert a TABLE in IEBut other browsers do not. The solution isAdded to TABLEElement, as shown below:

Var row = document. createElement ("tr"); var cell = document. createElement ("td"); var cell_text = document. createTextNode ("bananas do not eat apples"); cell. appendChild (cell_text); row. appendChild (cell); document. getElementsByTagName ("tbody") [0]. appendChild (row );

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 ):

...