Browser-compatible JS notation Summary

<span id="Label3"></p><p><p>-, Element Lookup Problem<br>1. document.all[name]<br>(1) existing problems: Firefox does not support document.all[name]<br>(2) workaround: use getelementsbyname (name), getElementById (id), etc. to Replace.</p></p><p><p>2. Collection Class object issues<br>(1) existing problems: ie in many collections of objects can be used (), but in Firefox can only use [].<br>For example: ie can use document.forms ("formName") to return the form named "formName", but it does not work in Firefox.<br>(2) workaround: Use [], The above example can be changed to document.forms["formName"]</p></p><p><p>3. HTML element ID is visible in javascript<br>(1) existing problem: The ID in the HTML element in IE can be used directly as the subordinate object variable name of Document. Not in Firefox.<br>(2) workaround: use getElementById ("idname") instead of Idname as an object variable.</p></p><p><p>4. Eval (idname) Get the object<br>(1) existing problem: in ie, using eval (idname) can get the ID idname html object, in Firefox cannot.<br>(2) workaround: use getElementById (idname) instead of eval (idname).<br><br>5. The variable name is the same as an HTML object ID<br>(1) existing problem: in firefox, because the object ID is not the name of the HTML object, you can use the same variable name as the HTML object id, ie Cannot.<br>(2) solution: in declaring variables, all add var, to avoid ambiguity, so in IE can run normally. In addition, it is best not to take the same variable name as the HTML object ID to reduce the Error.</p></p><p><p>Note: 3, 4, and 5 fall into the same category.</p></p><p><p>6. Frame<br>(1) existing problems: in IE can use window.top.frameId and window.top.frameName to get the frame represented by the Window,firefox can only use Window.top.frameName.<br>(2) Workaround: set the Frame's ID and name to the same, and use Window.top.frameName to access the Frame.</p></p><p><p>second, DOM Operation<br>1. Set the text content of the Element.<br>(1) existing problems: IE uses innertext, while Firefox uses textcontent to set element text Content.<br>(2) workaround: If the text content does not contain special characters such as "<" and ">", you can use Innerhtml. otherwise, You can use:<br>var child = elem.firstchild;<br>If (child! = Null) elem.removechild (child);<br>Elem.appendchild (document.createtextnode (content));</p></p><p><p>2. Parentelement,parent.children<br>(1) existing problems: ie can use parentelement to get the parent node, Parent.children get all the Children node Node. Firefox does not support.<br>(2) workaround: use parentnode and Parent.childnodes.</p></p><p><p>3. Explanation of the Childnodes.<br>(1) existing problems: IE and Firefox in the childnodes interpretation of different, ie will not contain blank text nodes, and Firefox will Contain.<br>(2) workaround: use ChildNodes to filter text nodes as Follows:<br>var children = elem.childnodes;<br>For (i = 0; I < children.length; i++) {<br>If (children[i].nodetype! = 3) {//filter text nodes<br>// ...<br>}<br>}</p></p><p><p>4. Explanation of the Document.getelementsbyname.<br>(1) existing problem: ie in getelementsbyname only check <input> and elements, and in Firefox will check all the Elements.<br>(2) workaround: do not use Getelementsbyname to check for elements other than <input> and , if you want to get a single element, use getElementById as much as Possible.</p></p><p><p>5. Explanation of the DOCUMENT.GETELEMENTBYID.<br>(1) existing problem: in ie, getElementById not only examines the ID attribute, but also checks the name property, which is also returned when the Name property matches a parameter. In firefox, only the id attribute is Checked.<br>(2) workaround: try to keep the ID and name the same, and do not let one element name property be the same as the ID property of another Element.<br></p></p><p>III. Events<br>1. Event.x and EVENT.Y issues<br>(1) existing problem: in ie, the event object has an x, y attribute, not in firefox.<br>(2) workaround: in firefox, the equivalent of Event.x is Event.pagex. You can use:<br>MX = event.x? event.x:event.pagex;<br><br>2. window.event<br>(1) existing problem: cannot run on Firefox using window.event<br>(2) workaround:<br>Original code (can be run in ie):<br><input type= "button" name= "somebutton" value= "submit" onclick= "javascript:gotosubmit ()"/><br>...<br><script language= "javascript" ><br>function Gotosubmit () {<br>...<br>Alert (window.event); Use window.event<br>...<br>}<br></script></p><p>New code (can be run in IE and firefox):<br><input type= "button" name= "somebutton" value= "submit" onclick= "javascript:gotosubmit (event)"/><br>...<br><script language= "javascript" ><br>function Gotosubmit (evt) {<br>EVT = evt? Evt: (window.event window.event:null);<br>...<br>Alert (evt); Use EVT<br>...<br>}<br></script></p><p><p>3. Attachevent and AddEventListener<br>(1) existing problems: use Attachevent to add events in ie, use AddEventListener in Firefox.<br>(2) Workaround: as follows, note the difference between the event parameters, one is click, the other is the ONCLICK.<br>If (document.attachevent) document.attachevent ("click", clickhandler,false);<br>else Document.addeventlistener ("onclick", clickhandler);</p></p><p><p>Iv. Grammar<br>1. const<br>(1) existing problem: The const keyword cannot be used in Ie. such as const CONSTVAR = 32; in ie, This is a syntax Error.<br>(2) workaround: do not use const instead of var.</p></p><p><p> 2. Extra comma <br>   (1) existing problem: the object literal constants in Firefox allow extra commas, not allowed in Ie. The following statement is illegal in Ie. <br>       var obj = {' key ': ' aaa ',} <br>   (2) workaround: Remove the extra Comma. <br>    <br> v. XML <br> 1. Create XMLHttpRequest <br>   (1) existing issues: Firefox uses Xmlhttprequest,ie with Activexobject. <br>   (2) workaround: <br>       if (window. Xmlhttprequest) {<br>           req = new XMLHttpRequest (); <br>      } else if (window. Activexobject) {<br>           req = new ActiveXObject (" Microsoft.XMLHTTP "); <br>      } </p></p><p><p>2. Creating the DOM<br>(1) existing problems: Firefox and IE create Dom in different ways.<br>(2) workaround:<br>function Createxmldom () {<br>var oxmldom;<br>If (window.activexobject) {//IE<br>Oxmldom = new ActiveXObject ("microsoft.xmldom");<br>} else {//Firefox<br>Oxmldom = document.implementation.createDocument ("", "", null);<br>}<br>}</p></p><p>3. Loading XML<br>(1) existing problems: If you want to load external files ie and Firefox can be used:<br>oxmldom.async=false; This is necessary in firefox.<br>Oxmldom.load ("test.xml");<br>however, They do not load XML strings in the same way, ie directly can use Oxmldom.loadxml ("<root><child/></root>"), and Firefox to use Domparser:<br>var oparser = new Domparser ();<br>var oxmldom = oparser.parsefromstring ("<root/>", "text/xml");<br>(2) solution: The better way is to give Firefox xmldom plus Loadxml method:<br>If (isfirefox) {//requires Browser detection<br>Document.prototype.loadXML = function (sXml) {<br>var oparser = new Domparser ();<br>var oxmldom = oparser.parsefromstring (sXml, "text/xml");<br><br>While (this.firstchild) This.removechild (this.firstchild);<br><br>for (var i = 0; i < oXmlDom.childNodes.length; i++) {<br>var onewnode = This.importnode (oxmldom.childnodes[i], true);<br>This.appendchild (onewnode);<br>}<br>}<br>}<br>This allows the Loadxml method to be called in IE and firefox.<br><br>4. XPath Support<br>(1) existing problems: ie can be directly used xmldom selectnodes according to the XPath expression to select nodes, Firefox is more complex, need to use Xpathevaluator.<br>Ie:<br>var lstnodes = OXmlDom.documentElement.selectNodes ("employee/name");<br>for (var i = 0; i < lstnodes.length; i++) {<br>Alert (lstnodes[i].firstchild.nodevalue);<br>}<br>Firefox:<br>var oevaluator = new Xpathevaluator ();<br>var oresult = oevaluator.evaluate ("employee/name", oxmldom.documentelement, null, xpathresult.ordered_node_iterator_ TYPE, null);<br>var oelement = Oresult.iteratenext ();<br>While (oelement) {<br>Alert (oElement.firstChild.nodeValue);<br>Oelement = Oresult.iteratenext ();<br>}<br>(2) workaround: a better way to add the SelectNodes method to the element of Firefox.<br>If (isfirefox) {//requires Browser detection<br>Element.prototype.selectNodes = function (sxpath) {<br>var oevaluator = new Xpathevaluator ();<br>var oresult = oevaluator.evaluate (sxpath, this, null, xpathresult.ordered_node_iterator_type, null);<br><br>var anodes = new Array ();<br><br>If (oresult! = Null) {<br>var oelement = Oresult.iteratenext ();<br>While (oelement) {<br>Anodes.push (oelement);<br>Oelement = Oresult.iteratenext ();<br>}<br>}<br>Return anodes;<br>}<br>}<br>This allows you to invoke the SelectNodes method in both IE and firefox.<br><br>5. XSLT Support<br>(1) existing problem: ie can use Xmldom's Transfernode method to convert it to html, and Firefox needs to use Xsltprocessor.<br>Ie:<br>Oxmldom.load ("employee.xml");<br>Oxsldom.load ("employee.xslt");<br>var sresult=oxmldom.transformnode (oxsldom);<br>Firefox:<br>var oprocessor = new Xsltprocessor ();<br>Oprocessor.importstylesheet (oxsldom);<br>var oresultdom = oprocessor.transformtodocument (oxmldom);<br>var oserializer = new XMLSerializer ();<br>var sXml = oserializer.serializetostring (oresultdom, "text/xml");<br>Alert (sXml);<br>(2) workaround: a better way to add the Transfernode method to the Firefox node.<br>If (isfirefox) {//requires Browser detection<br>Node.prototype.transformNode = function (oxsldom) {<br>var oprocessor = new Xsltprocessor ();<br>Oprocessor.importstylesheet (oxsldom);<br>var oresultdom = oprocessor.transformtodocument (oxmldom);<br><br>var oserializer = new XMLSerializer ();<br>var sXml = oserializer.serializetostring (oresultdom, "text/xml");<br><br>Return sXml;<br>}<br>}<br>This allows you to invoke the Transfernode method in both IE and firefox.</p><p><p></p></p><p><p>This article from CSDN blog, reproduced please indicate the source: http://blog.csdn.net/ypacyhero/archive/2010/05/04/5556242.aspx</p></p><p><p>(turn) browser-compatible JS Notation Summary</p></p></span>