JavaScript common browser compatibility issues

Common browser-native JavaScript compatibility issues fall into the following categories:

First, Dom

1, get HTML elements, compatible with all browser methods: document.getElementById ("id") with the ID to get the element;

document.getElementsByTagName ("tag") [0] Gets the element with the tag name. In addition IE does not support Document.getelementsbyclassname ("class");

2. Get form form elements

Compatible with IE:document.formname.itemname only

Compatible with all: document.forms["FormName"].elements["ItemName"] or document.forms[i].elements["ItemName"]

3. Set CSS

compatible with Firefox only:Obj.setattribute (Style,color:green)

Compatible with all: document.getElementById ("banana"). ClassName and document.getElementById ("banana"). Style.color

4. Get CSS

Getting inline styles is available as a style, and for getting styles from internal and external style sheets, different browser differences are as follows

Compatible with Ie:currentstyle only

In standard browser: getComputedStyle

5. Set the width height

Only compatible with IE:obj.style.height = Imgobj.height

Compatible with all: Obj.style.height = imgobj.height + ' px ';

6, InnerText

Only compatible with ie:obj.innertext= "MyText";

Compatible with all: if (document.all) { Obj.innertext = "MyText";  } Else { obj.textcontent = "MyText"; }

II. Events

1, the event flow, the current event flow mainly refers to capture-target-bubble, two IE6-IE8 does not support event capture, generally in the event bubbling phase response to the event.

2. Adding events and deleting events

Only compatible with IE:obj.achEvent ("onclick", handler) click represents the event, handler represents the handler function. Delete the event with DetachEvent ("click", Handler).

Compatible Fly IE:obj.addEventListener ("click", Handler,false) Click represents the event, handler represents the handler function, and the third parameter indicates whether it is captured, where false means not in the capture phase, generally false. Delete the event with RemoveEventListener ("click", Handler,false).

3. Event Object

For event object Event,ie under Window.event, all browsers are compatible with the notation event = Event | | window.event;

Gets the target node that triggered the event, IE is event.srcelement, non IE browser is event.target, to get the object that defines the event is used Event.this.

Third, BOM

1. Open the Window

Both modal and non-modal windows can be opened in compatible Ie:ie with ShowModalDialog and showModelessDialog

Compatible with all: open a new window directly using window.open (pageurl,name,parameters) mode.

2. Get the Frame Object

Only compatible with Ie:var frame1 = Window.testframe

Compatible with all: Window.top.document.getElementById ("Frameid") to access frame tags, and can be window.top.document.getElementById ("Testframe"). src = ' xx.htm ' to toggle the contents of the frame, or you can toggle the contents of the frame by window.top.frameName.location = ' xx.htm '.  

At present, I have encountered the common summary of so much, the later learning encountered I will add added in.

JavaScript common browser compatibility issues