Tous les collègues du front-end Web connaissent très bien document.getElementById. Pendant le processus de développement, nous avons souvent besoin de l'utiliser pour obtenir l'élément avec l'ID de page xx Depuis que la bibliothèque JS vétéran Prototype est devenue populaire, tout le monde aime l'abréger comme ceci.
Copiez le code comme suit :
// Méthode 1
function $(id){ return document.getElementById(id);
Quelqu'un s'est-il déjà demandé pourquoi c'est écrit de cette façon au lieu de la façon suivante ?
Copiez le code comme suit :
// Méthode 2
var $ = document.getElementById;
Écrire $ de cette façon est plus concis et clair. Attribuez la méthode de document getElementById à la variable $ et utilisez $ pour obtenir l'élément avec l'ID de page xx. En fait, la méthode 2 est réalisable dans IE6/7/8 (il y a quelques changements dans IE9), mais pas dans Firefox/Safari/Chrome/Opera. Veuillez également le tester vous-même.
Pourquoi Firefox/Safari/Chrome/Opera ne peuvent-ils pas l'obtenir dans la méthode 2 ? La raison en est que l'implémentation interne de la méthode getElementById dans ces navigateurs doit s'appuyer sur cela (document), mais IE n'en a pas besoin. Ou en d'autres termes, la méthode 2 indique que cela manque lorsqu'elle est appelée dans Firefox/Safari/Chrome/Opera. Ce qui suit est un exemple simple.
Copiez le code comme suit :
//Définir une fonction show
function show(){alert(this.name);}
//Définit un objet p avec l'attribut name
var p = {nom : 'Jack'} ;
show.call(p); // -> 'Jack'
afficher(); // -> ''
show.call(null); // -> ''<BR>
Vous pouvez voir que l'implémentation de show repose sur cela (en termes simples, ceci est utilisé dans le corps de la méthode). Par conséquent, si l'environnement appelant (contexte d'exécution) n'a pas d'attribut name, le résultat attendu ne sera pas obtenu.
En d'autres termes, IE6/7/8 ne l'utilise pas lors de l'implémentation de document.getElementById, mais IE9/Firefox/Safari/Chrome/Opera doit l'utiliser, où il s'agit de l'objet document. Lorsque la méthode 2 est appelée directement, l'interne this est l'objet window, donc la méthode 2 ne peut pas obtenir l'élément normalement basé sur l'ID dans Firefox/Safari/Chrome/Opera.
Si vous modifiez l'environnement d'exécution de document.getElementById en document au lieu de window, vous pouvez utiliser $ normalement. comme suit
Copiez le code comme suit :
// Correction de document.getElementById
document.getElementById = (fonction(fn){
fonction de retour(){
return fn.apply(document,arguments);
} ;
})(document.getElementById);
// Après réparation, attribuez une valeur à $, $ peut être utilisé normalement.
var $ = document.getElementById;
Encore une fois, la nouvelle méthode de liaison pour la fonction dans ECMAScript5 peut obtenir le même effet.
Copiez le code comme suit :
// Méthode 3
var $ = document.getElementById.bind(document);
Mais actuellement, la méthode 3 n'est prise en charge que par IE9/Firefox/Chrome/.
Après avoir analysé la situation de getElementById, il est facile de comprendre pourquoi les méthodes suivantes diffèrent selon les navigateurs.
Copiez le code comme suit :
var principe = document.write;
prinf('<h3>Test prinf</h3>'); // IE6/7/8 peut s'exécuter, d'autres navigateurs signalent des erreurs
var prinfln = document.writeln;
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8 peut s'exécuter, d'autres navigateurs signaleront une erreur
var reload = emplacement.reload;
reload(); // IE6/7/8 peut s'exécuter, d'autres navigateurs signaleront une erreur
var go = histoire.go;
go(-2); // IE6/7/8 peut s'exécuter, d'autres navigateurs signaleront une erreur