JavaScript DOM

In order to achieve the idea of smooth degradation, backward compatibility, and mark separation, the first thing to do every time you write js code should be the necessary testing and checking work:
In the js file, first add the following code to check:

window.onload = function(){
if(!document.getElementsByTagName)  return false;
if(!document.getElementById) return false;
if(!document.getElementsByClassName)  return false;
if(!document.getElementById("selector"))  return false;
if(!document.getElementsByTagName("tag"))  return false;
if(!document.getElementsByClassName("selector"))  return false;
};

Universal encapsulation function:

var $ = function(id){
   return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){  //obj : element object name, event : bind the event, fn : the triggered callback function 
   if(obj.addEventListener){
obj.addEventListener(event,fn,false);
   }
   else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
   }
}

For many functions that require page load to run, window.onload encapsulation method is as follows:

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function")
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

JavaScript differences between firefox and IE:

1. In most cases, returning false for the event handler prevents the default event behavior; for example, clicking on an a element by default will redirect the page to the page specified by the href attribute of that element.
return false is equivalent to the terminator, return true is equivalent to the executor.
The three scenarios of return usage are summarized in js as follows:
retrun true; Returns the correct handling of the penalty result.
return false; Returns the result of incorrect processing penalty; Punishment for termination of treatment; Block submission forms; Block the action of fulfilling the default.
return; Return control to the page.

2. Most of the time, assigning a function call to a variable is a good idea.

3. The noscript tag can be used by browsers that recognize the script tag but cannot support the script within it. If the browser supports scripting, it will not display the text in the noscript tag.

4. When setting styles dynamically, it is best to use CSS whenever possible. The easiest way is to choose the method that is easiest to implement.

5. In a function, global objects are stored as local variables to reduce global lookups, because local variables can be accessed faster than global variables.

6. If you are dealing with continuously running code, you should not use setTimeout, but setInterval, because setTimeout will initialize a timer every time, while setInterval will only initialize a timer at the beginning.

7. If you want to concatenate multiple strings, you should use += less and replace the conditional branch with the 3-mesh operator as much as possible.

8. Many people prefer to use parseInt(), but parseInt() is used to convert strings to Numbers, not between floating point and integer types. Instead, we should use Math.floor () or Math.round ().

9. In JavaScript, all variables can be declared using a single var statement, which is a combination of statements in 1 to reduce the execution time of the entire script.

10. For large DOM changes, using innerHTML is much faster than creating the same DOM structure using the standard DOM method.

11. When multiple methods are triggered by the same object using the.onclick script, the last method will override the first method. In other words, only the last bound method will be executed when the onclick event of the object occurs. Event listening, on the other hand, does not have overwrite and each bound event is executed.

12. If the toString() method is defined for type conversion, it is recommended to explicitly call toString(), because it is more efficient to call the toString() method of the object directly after trying out all possibilities.

elemet.es1064en.width is a special property of IE browser. getComputedStyle(element, null) is a special property of firefox and Chrome.

function getStyle(obj,name) {
   if(obj.currentStyle) {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj,null)[name];
   }
}

That's all for this article, I hope you enjoy it.