Alle Web-Frontend-Kollegen sind mit document.getElementById bestens vertraut. Während des Entwicklungsprozesses müssen wir es oft verwenden, um das Element mit der Seiten-ID xx zu erhalten. Da die erfahrene JS-Bibliothek Prototype populär geworden ist, wird sie von allen gerne so abgekürzt.
Kopieren Sie den Codecode wie folgt:
// Methode 1
Funktion $(id){ return document.getElementById(id);
Hat sich jemals jemand gefragt, warum es so geschrieben ist und nicht wie folgt?
Kopieren Sie den Codecode wie folgt:
// Methode 2
var $ = document.getElementById;
Das Schreiben von $ ist prägnanter und klarer. Weisen Sie der Variablen $ die Dokumentmethode getElementById zu und verwenden Sie $, um das Element mit der Seiten-ID xx abzurufen. Tatsächlich ist Methode 2 in IE6/7/8 machbar (es gibt einige Änderungen in IE9), aber nicht in Firefox/Safari/Chrome/Opera. Bitte testen Sie es auch selbst.
Warum kann Firefox/Safari/Chrome/Opera es nicht in Methode 2 abrufen? Der Grund dafür ist, dass die interne Implementierung der getElementById-Methode in diesen Browsern darauf angewiesen ist (Dokument), der IE dies jedoch nicht benötigt. Oder anders ausgedrückt: Methode 2 besagt, dass dies beim Aufruf in Firefox/Safari/Chrome/Opera fehlt. Das Folgende ist ein einfaches Beispiel.
Kopieren Sie den Codecode wie folgt:
//Definieren Sie eine Funktion show
Funktion show(){alert(this.name);}
//Definiere ein p-Objekt mit dem Namensattribut
var p = {name:'Jack'};
show.call(p); // -> 'Jack'
show(); // -> ''
show.call(null); // -> ''<BR>
Sie können sehen, dass die Implementierung von show darauf basiert (einfach ausgedrückt wird dies im Methodenkörper verwendet). Wenn die aufrufende Umgebung (Ausführungskontext) daher kein Namensattribut hat, wird das erwartete Ergebnis nicht erzielt.
Mit anderen Worten: IE6/7/8 verwendet dies nicht bei der Implementierung von document.getElementById, aber IE9/Firefox/Safari/Chrome/Opera muss dies verwenden, wobei dies das Dokumentobjekt ist. Wenn Methode 2 direkt aufgerufen wird, ist dies intern das Fensterobjekt, sodass Methode 2 das Element nicht normalerweise basierend auf der ID in Firefox/Safari/Chrome/Opera abrufen kann.
Wenn Sie die Ausführungsumgebung von document.getElementById in „document“ statt „window“ ändern, können Sie $ normal verwenden. wie folgt
Kopieren Sie den Codecode wie folgt:
// Dokument.getElementById reparieren
document.getElementById = (function(fn){
Rückgabefunktion(){
return fn.apply(document,arguments);
};
})(document.getElementById);
// Nach der Reparatur $ einen Wert zuweisen, $ kann normal verwendet werden.
var $ = document.getElementById;
Auch hier kann die neue Bindemethode für Funktionen in ECMAScript5 den gleichen Effekt erzielen.
Kopieren Sie den Codecode wie folgt:
// Methode 3
var $ = document.getElementById.bind(document);
Derzeit wird Methode 3 jedoch nur von IE9/Firefox/Chrome/ unterstützt.
Nach der Analyse der Situation von getElementById ist es leicht zu verstehen, warum sich die folgenden Methoden in verschiedenen Browsern unterscheiden.
Kopieren Sie den Codecode wie folgt:
var prinf = document.write;
prinf('<h3>Test prinf</h3>'); // IE6/7/8 kann ausgeführt werden, andere Browser melden Fehler
var prinfln = document.writeln;
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8 kann ausgeführt werden, andere Browser melden einen Fehler
var reload = location.reload;
reload(); // IE6/7/8 kann ausgeführt werden, andere Browser melden einen Fehler
var go = History.go;
go(-2); // IE6/7/8 kann ausgeführt werden, andere Browser melden einen Fehler