JS in Browser Compatibility Tutorial: Dom method and object reference

Article Introduction: JS in Browser Compatibility Tutorial: Dom method and object reference.

1. getElementById

"Analysis Notes" to first look at a set of code:

<!--input Object access 1-->
<input id= "id" type= "button"
Value= "Click Me" ōnclick= "alert (id.value)"/>

In Firefox, the button does not respond, in IE, you can, because for IE, the ID of an HTML element can be used directly in the script as a variable name, but not in Firefox.

"Compatibility processing" as far as possible using the document.getElementById, access to objects, with the "id" to access the object with ID, and an ID in the page must be unique, also in the name of the tag to access the object, With document.getElementsByTagName ("div") [0]. This way get more browser support.

<!--input Object Access 2-->
<input id= "id" type= "button" value= "click Me" onclick= "alert (document.getElementById (" id "). value)"/>

2. Collection Class object access

"Analysis of" ie, you can use () or [] Get collection Class objects, Firefox, can only use [] Get collection class objects. Such as:

document.write (Document.forms ("FormName"). Src); This writing can access the SCRC property of the form object under IE

"Compatibility Handling" changes document.forms ("FormName") to document.forms["FormName"]. Use [] to get collection class objects uniformly.

3. Reference to Frame

"Analytics" IE can access the Window object for this frame by ID or name, and Firefox can only access the Window object for this frame through name.

For example, if the frame tag is written in the HTM in the top-level window, you can access it like this:

IE:window.top.frameId or Window.top.frameName to access this window object;

Firefox: This is the only way to access this window object window.top.frameName.

Compatibility handling uses the name of the frame to access the frame object, and in IE and Firefox you can access the frame object using Window.document.getElementById ("Frameid").

4. parentelement

"Analysis" IE supports the use of parentelement and parentnode to obtain parent nodes. And Firefox can only use parentnode.

Compatibility processing because both Firefox and IE support DOM, the parentnode is used uniformly to access the parent node.

5. Table operation

"Analysis of" ie in the next table either with innerHTML or appendchild insert <tr> has no effect, while other browsers are showing normal.

The workaround for compatibility is to add <tr> to the <tbody> element of the table, as shown in the following:

var row = document.createelement ("tr");
var cell = document.createelement ("TD");
var cell_text = document.createTextNode ("inserted content");
Cell.appendchild (Cell_text);
Row.appendchild (cell);
document.getElementsByTagName ("tbody") [0].appendchild (Row);

6. Remove Nodes Removenode () and RemoveChild ()

"Analysis" Appendnode in IE and Firefox can be used normally, but removenode can only be used under IE.

The function of the Removenode method is to delete a node, the syntax is Node.removenode (false), or Node.removenode (true), and the return value is the deleted node.

Removenode (False) indicates that only the specified node is deleted, and then the original child node of the node is promoted to the child node of the original parent node.

Removenode (True) indicates that the specified node and all subordinate nodes are deleted. The deleted node becomes an orphaned node and no longer has child nodes and parent nodes.

In the "Compatibility Processing" Firefox, nodes do not have removenode methods, and can only be replaced by the RemoveChild method, which is to go back to the parent node and remove the node to be removed from the parent node.

Node.parentNode.removeChild (node); In order to be able to use under IE and Firefox, take the parent node of the upper layer and remove it.

7. ChildNodes acquired node

"Analysis Notes" childnodes the meaning of the subscript is different in IE and Firefox, look at the following code:

<ul id= "Main" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input Type=button value= "click me!" onclick= "Alert (document.getElementById (" main "). Childnodes.length)" >

Run with IE and Firefox respectively, ie results in 3, while Firefox is 7. Firefox uses DOM specification, "#text" means text (actually meaningless spaces and newline, etc.) in Firefox will also be resolved into a node, in IE only meaningful text will be resolved into the "#text."

"Compatibility Handling"

Method One, when you get the child nodes, you can circumvent the problem by Node.getelementsbytagname (). But getelementsbytagname to complex DOM structures is significantly better than using childnodes, because ChildNodes can handle the DOM's hierarchy.

Method Two, in practical use, Firefox in the traversal of child nodes, it may be in the For loop to add:

if (childnode.nodename== "#text") continue;//or use NodeType = 1.

This allows you to skip some text nodes.

8. Firefox can not support the innertext

"Analysis" Firefox does not support innertext, it supports textcontent to achieve innertext, but Textcontent does not consider the element display way like innertext, so it is not completely compatible with IE. If you do not use Textcontent, the string contains no HTML code and can be replaced with innerHTML. You can also use JS to write a method to achieve.

"Compatibility Handling" is compatible by determining browser types:

if (document.all) {
document.getElementById ("element"). innertext = "my text";
} else{
document.getElementById ("element"). Textcontent = "my text";
}