Details about DOM in JavaScript and JavaScriptDOM

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.