Detailed explanation of DOM in JavaScript_javascript skills

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

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 wrapper function:

var $ = function(id){
   return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){  //obj：元素对象名字，event：绑定事件，fn：触发的回调函数
   if(obj.addEventListener){
obj.addEventListener(event,fn,false);
   }
   else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
   }
}

For many functions that require page loading and execution, the 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 function can prevent the default event behavior. For example, by default, clicking an a element will jump to the page specified by the href attribute of the element.
return false is equivalent to the terminator, and return true is equivalent to the executor.
A summary of the three scenarios of return usage in js is as follows:
retrun true; Returns the correct processing result.
return false; return the wrong processing result; terminate the processing; prevent the form from being submitted; prevent the execution of the default action.
return; Return control to the page.

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

3. The noscript tag can be used in browsers that can recognize the script tag but cannot support the script in 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 simplest thing is to choose the method that is easiest to implement.

5. In a function, global objects are stored as local variables to reduce global searches, because accessing local variables is faster than accessing global variables.

6. If you are targeting code that is constantly running, you should not use setTimeout, but setInterval, because setTimeout will initialize a timer every time, and setInterval will only initialize a timer at the beginning.

7. If you want to connect multiple strings, you should use = less and try to use ternary operators instead of conditional branches when making conditional branches.

8. Many people like to use parseInt(). In fact, parseInt() is used to convert strings into numbers, not between floating point numbers and integers. We should use Math.floor() or Math. round().

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

10. For large DOM changes, using innerHTML is much faster than using standard DOM methods to create the same DOM structure.

11. When the same object uses the .onclick writing method to trigger multiple methods, the latter method will overwrite the previous method. That is to say, when the onclick event of the object occurs, only the last binding will be executed. method. With event listening, there will be no overwriting, and each bound event will be executed.

12. If the toString() method is defined for type conversion, it is recommended to call toString() explicitly, because the internal operation will try the toString() method of the object after trying all possibilities to see if it can be converted into String, so calling this method directly will be more efficient.

13. Because elemet.style can only get inline styles, element.currentStyle.width is a property exclusive to IE browser, and getComputedStyle(element, null).width is a property unique to Firefox and Chrome browsers, so in order Compatible, the method to obtain internal and external styles is as follows (composite styles, such as background, border, are not advisable, but should be written as backgroundColor, borderWidth):

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

The above is the entire content of this article, I hope you all like it.