Improve JavaScriptDOM operations

As a web Front-end, it is an important issue to deal with and understand the differences between browsers. The following describes my notes and summaries in my work. First, I will introduce the situation where no js library is used. 1. Set the element class name using the setAttribute Method: In jQuery, you can directly use the attr () method. You can use element. seSyntaxHighl in native JS.

As a web Front-end, it is an important issue to deal with and understand the differences between browsers. The following describes my notes and summaries in my work. First, I will introduce the situation where no js library is used.

1. Set the element class name using the setAttribute Method: In jQuery, you can directly use the attr () method, which can be used in native JS.

Element. setAttribute (class, newClassName) // This is W3C standard and is valid in browsers compatible with W3C standards. However, IE is the main melody of domestic users.
Element. setAttribute (className, newClassName) // This setting is valid in IE.
Element. className = newClassName // valid for all browsers (as long as javascript is supported)
Well, the beginning is over. The purpose of this article is to introduce the differences between browsers and let the front-end friends know that if the most effective method is used to solve the problem, let's continue.

2. FireFox does not have a window. event object, but only an event object. In IE, only window. event is supported, and other mainstream browsers support both. Therefore, it is generally written:

Function handle (e)
{
E = e | event;
...
}
3. DOMContentLoaded event principle: the window. onload event is triggered only when the page parsing/DOM tree is created and all resources such as slices, scripts, and style sheets are downloaded. This is a little too late for many practical applications, which affects the user experience. To solve this problem, a DOMContentLoaded method is added to FF. Compared with onload, this method is triggered earlier. It is triggered after the DOM content of the page is loaded, instead of waiting for loading other resources (this is jquery. ready () event implementation principle ).

// The following is the original analysis of jQuery 1.4.2.

BindReady: function (){
If (readyBound ){
Return;
}
ReadyBound = true;
// Catch cases where $ (document). ready () is called after
// Browser event has already occurred.
If (document. readyState = "complete "){
Return jQuery. ready ();
}
// Mozilla, Opera and webkit nightlies currently support this event
If (document. addEventListener ){
// Use the handy event callback
Document. addEventListener ("DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window. onload, that will always work
Window. addEventListener ("load", jQuery. ready, false );
// If IE event model is used
} Else if (document. attachEvent ){
// Ensure firing before onload,
// Maybe late but safe also for iframes
Document. attachEvent ("onreadystatechange", DOMContentLoaded );
// A fallback to window. onload, that will always work
Window. attachEvent ("onload", jQuery. ready );
// If IE and not a frame
// Continually check to see if the document is ready
Var toplevel = false;
Try {
Toplevel = window. frameElement = null;
} Catch (e ){}
If (document.doc umentElement. doScroll & toplevel ){
DoScrollCheck ();
}
}
}
Design Philosophy-Webkit and Firefox are both directly registered with the DOMContentLoaded event, but because Webkit is introduced in Versions later than 525, there is a compatibility risk. For IE, first register the onreadystatechange event of the document. After testing, this method is equivalent to window. onload and will still be triggered after all resources are downloaded. After that, if it is IE and the page is not in iframe, The doScroll method of documentElement is continuously called through setTiemout until the call is successful, and DOMContentLoaded is triggered. 1. jQuery's solution to IE is that in IE, some DOM methods can be called only after DOM Parsing is complete. doScroll is such a method, in turn, when doScroll can be called, it is the time when DOM Parsing is completed, and the document in prototype. compared with write, this solution can solve the problem that iframe is invalid on the page. In addition, jQuery seems worried that this method will fail when the page is in iframe, so the implementation code makes a judgment. If it is in iframe, it is implemented through onreadystatechange of document, otherwise, it is implemented through doScroll. However, after testing, even in iframe, doScroll is still valid.

4. Learn to use the conditional comments of IE. Many front-ends are always complaining about the Internet Explorer. Indeed, the compatibility issue will become more and more disgusting, but there is no way. Since there is no way to change, please enjoy it...

Let's summarize it here today. We will receive a false message next week and have time to post advanced AJAX articles, hoping to help new users or those in need. due to the limited number of documents, please forgive me for writing poorly. I just started to write a blog and it's a growth stage. Haha...

Green Channel: Please follow my favorites to contact me