Common JavaScript compatibility issues and related solutions of chrome and IE and firefox

2020-03-30 01:11:54
OfStack

To start with, the version of the browser I tested was chrome15.0.874.121, Firefox 8.01, IE9 tester

The following code is about declarations

E: if a document type specification exists, it is incorrectly interpreted as a Comment and treated as a Comment node, and the value of document.doctype is always null.

Firefox: if a document type description exists, make it the firstChild node of the document. Document.doctype is a DocumentType node, and the same node can also be accessed through firstChild or childNodes[0].

Safari, Chrome, Opera: if a document type description exists, use it as an explanation, but not as a child node of the document and not in childNodes.

11: find the element
I sometimes, I really don't understand, IE is always doing what, always want to be different. If the system doesn't allow native browsers, I bet Internet explorer's share will be even smaller.

If the id is the same as the name, it will be returned


<html>
    <head>
     <script defer>
      var item=document.getElementById("my");
   item.value="SECOND";

     </script>
    </head>
    <body>
     <input type="text" name="my" value="FIRST" >
    </body>
</html>

In IE, the result changes.

Again, IE, Id case insensitive


<html>
    <head>
     <script defer>
      var item=document.getElementById("MY");
   item.value="SECOND";

     </script>
    </head>
    <body>
     <input type="text" id="my" value="FIRST" >
    </body>
</html>

Sorry, his results changed again.

12: if it is a custom attribute, item.myattributs cannot get the correct result in a non-ie browser.


function(item,myatt){
  return item.attributes[myatt].value;
 }

Again, you know how to set a property, just assign it.


function(item,myatt,value){
  item.attributes[myatt].value=value;
 }

13: number of child nodes of the element


 <ul id="myul">
   <li>first</li>
   <li>second</li>
   <li>third</li>
  </ul>

IE comes out at 3, other browsers at 7.

The white space between nodes, which in other browsers are text nodes, results in 7. If it goes like this,


<ul id="myul"><li>first</li><li>second</li><li>third</li></ul>

So everybody's going to get 3.
14: create a node problem


//Add Element dynamically, which all browsers can implement
var newnode=document.createElement("input");
newnode.type="button";
newnode.value="sixth";
//You can also do this in IE
var newnode= document.createElement("<input type="button">");

15: when right clicking is blocked, firefox is different from others in the oncontextmenu event.

16: IE is different from other browsers when it comes to dynamically adding style and script. Check the details.