Verbesserungen bei JavaScript-DOM-Operationen

Als Web-Frontend ist der Umgang mit und das Verständnis von Browserunterschieden ein wichtiges Thema. Im Folgenden werde ich einige meiner Notizen bei der Arbeit zusammenfassen. Zunächst werde ich die Situation ohne Verwendung einer js-Bibliothek vorstellen.

1. Die setAttribute-Methode legt den Elementklassennamen fest: In jQuery können Sie direkt die attr()-Methode oder in nativem JS verwenden

element.setAttribute(class,newClassName) // Dies ist ein W3C-Standard und gilt in Browsern, die mit W3C-Standards kompatibel sind. IE ist jedoch das Hauptthema für inländische Benutzer
element.setAttribute(className, newClassName) //Diese Einstellung ist nur im IE gültig
element .className = newClassName //gültig in allen Browsern (sofern sie Javascript unterstützen)
Okay, das war's für den Anfang. Der Zweck dieses Artikels besteht darin, die Unterschiede zwischen Browsern vorzustellen und Front-End-Freunden mitzuteilen, wie es geht Um die effektivste Methode zu verwenden, lösen Sie das Problem und fahren Sie unten fort.

2. FireFox hat kein window.event-Objekt, nur das Event-Objekt unterstützt IE nur window.event, während andere Mainstream-Browser beides unterstützen, daher wird es im Allgemeinen wie folgt geschrieben:

Funktionshandle( e)
{
e = e ||. event;
...
}
　3. DOMContentLoaded-Ereignisprinzip: Das window.onload-Ereignis ist beim Parsen der Seite/DOM Die Baumerstellung ist abgeschlossen. Sie wird ausgelöst, nachdem der Download aller Ressourcen wie Bilder, Skripte, Stylesheets usw. abgeschlossen ist. Dies ist für viele praktische Anwendungen etwas zu „spät“, was sich auf das Benutzererlebnis auswirkt. Um dieses Problem zu lösen, wurde FF eine DOMContentLoaded-Methode hinzugefügt. Diese Methode wird früher ausgelöst, nachdem der DOM-Inhalt der Seite geladen wurde, ohne auf das Laden anderer Ressourcen zu warten ist das Implementierungsprinzip des jquery.ready()-Ereignisses).

//Das Folgende ist die ursprüngliche Analyse der jQuery 1.4.2-Version

bindReady: function() {
　if ( readyBound ) {
　 return;
　}
readyBound = true;
// Fälle abfangen, in denen $(document).ready() aufgerufen wird, nachdem das
// Browserereignis bereits aufgetreten ist.
if ( document.readyState === "complete " ) {
　 return jQuery.ready();
　document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
　　　// Ein Fallback auf window.onload, das immer funktioniert
　　window. addEventListener("load", jQuery.ready, false);
　　 // Wenn IE-Ereignismodell verwendet wird
　} else if ( document.attachEvent ) {
　 // Sicherstellen, dass es vor dem Laden ausgelöst wird,
　 / / vielleicht spät, aber sicher auch für iframes
　document. attachmentEvent("onreadystatechange", DOMContentLoaded);
　　　 // Ein Fallback auf window.onload, das immer funktioniert
　　window.attachEvent( "onload", jQuery .ready );
　　 // Wenn IE und kein Frame
　 // Kontinuierlich prüfen, ob das Dokument bereit ist
　var toplevel = false;
versuchen Sie {
　toplevel = window.frameElement == null;
} Catch(e) { }
　if (document.documentElement.doScroll && toplevel) {
　doScrollCheck();
　　}
　}
}
Designidee: Webkit und Firefox gleich behandeln, beide sind direkt Registrieren Sie das DOMContentLoaded-Ereignis, aber da Webkit in Version 525 oder höher eingeführt wurde, besteht ein Kompatibilitätsrisiko. Registrieren Sie für IE zunächst das onreadystatechange-Ereignis des Dokuments. Nach dem Testen entspricht diese Methode window.onload. Sie wartet noch, bis alle Ressourcen heruntergeladen sind, bevor sie ausgelöst wird. Wenn danach festgestellt wird, dass es sich um einen IE handelt und sich die Seite nicht in einem Iframe befindet, wird die doScroll-Methode von documentElement kontinuierlich über setTiemout aufgerufen, bis der Aufruf erfolgreich ist und DOMContentLoaded ausgelöst wird. 1 Das Prinzip der jQuery-Lösung für IE besteht darin, dass einige DOM-Methoden erst aufgerufen werden können, nachdem die DOM-Analyse abgeschlossen ist. Wenn doScroll aufgerufen werden kann, ist die DOM-Analyse abgeschlossen Mit document.write im Prototyp kann diese Lösung das Fehlerproblem lösen, wenn die Seite über einen Iframe verfügt. Darüber hinaus scheint jQuery zu befürchten, dass diese Methode fehlschlägt, wenn sich die Seite in einem Iframe befindet. Daher erfolgt eine Beurteilung im Implementierungscode. Wenn sie sich in einem Iframe befindet, wird sie durch den onreadystatechange des Dokuments implementiert wird durch doScroll implementiert. Nach dem Testen ist doScroll jedoch auch in einem Iframe immer noch effektiv.

4. Lernen Sie, die bedingten Kommentare des IE zu verwenden. Viele Frontends beschweren sich immer über den bösen IE. Der Umgang mit Kompatibilitätsproblemen wird zwar immer ekliger, aber da es keine Möglichkeit gibt, etwas zu ändern, dann genießen Sie es bitte...

< !- -[if IE 5]>

Version 5