Details about DOM in JavaScript and JavaScriptDOM

Details about DOM in JavaScript and JavaScriptDOM

In order to achieve smooth degradation, backward compatibility, and tag separation, the first thing to do when writing JavaScript code should be necessary testing and checking:
Add the following code to the js file for 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;};

General encapsulation functions:

Var $ = function (id) {return document. getElementBy Id (id);} var addEvent = function (obj, event, fn) {// obj: Element Object Name, event: bind event, fn: the 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 loading and running, 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, false is returned for the event handler to prevent default event behavior. for example, if you click an a element by default, the page 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 executable.
In js, the three scenes of return usage are summarized as follows:
Retrun true; returns the correct result of the penalty.
Return false; return the result of an error handling penalty; terminate the handling penalty; block the submission of forms; block the fulfillment of default actions.
Return; return the ownership to the page.

2. In most cases, it is a good idea to assign a function call value to a variable.

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

4. When setting styles dynamically, it is best to select CSS as long as possible. The simplest option is to select the easiest method to implement.

5. In a function, Global Object Storage is used as a local variable to reduce global search, because accessing local variables is faster than accessing global variables.

6. If you are targeting constantly running code, you should not use setTimeout, but setInterval, because setTimeout initializes a timer every time, setInterval initializes only one timer at the beginning.

7. If you want to connect multiple strings, + = should be used less, and the three-object operator should be used as much as possible to replace the condition branch.

8. Many people like to use parseInt (). In fact, parseInt () is used to convert a string to a number, rather than between a floating point and an integer. We should use Math. floor () or Math. round ().

9. All variables in JavaScript can be declared using a single var statement, which is a combined statement 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 is used. when the onclick method triggers multiple methods, the latter method overwrites the previous method. That is to say, when the onclick event of an object occurs, only the last bound method is executed. However, event listening does not overwrite events, and each Bound event is executed.

12. If the toString () method is defined for type conversion, we recommend that you call toString () explicitly, because the internal operation will try the toString () of the object after trying all possibilities () the method can be converted to a String, so it is more efficient to directly call this method.

13. Because elemet. style can only obtain inline styles, while element. currentStyle. width is a private attribute of IE browser, getComputedStyle (element, null ). width is a special attribute of Firefox and Chrome. To ensure compatibility, the internal and external styles can be obtained as follows (composite styles, such as background and border, should be written as backgroundColor and borderWidth ):

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

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