Todos los colegas de front-end web están muy familiarizados con document.getElementById. Durante el proceso de desarrollo, a menudo necesitamos usarlo para obtener el elemento con el ID de página xx. Desde que la veterana biblioteca JS Prototype se hizo popular, a todos les gusta abreviarlo así.
Copie el código de código de la siguiente manera:
// Método 1
función $(id){ return document.getElementById(id);
¿Alguien se ha preguntado alguna vez por qué está escrito de esta manera en lugar de la siguiente?
Copie el código de código de la siguiente manera:
// Método 2
var $ = document.getElementById;
Escribir $ de esta manera es más conciso y claro. Asigne el método de documento getElementById a la variable $ y use $ para obtener el elemento con el ID de página xx. De hecho, el método 2 es factible en IE6/7/8 (hay algunos cambios en IE9), pero no en Firefox/Safari/Chrome/Opera. Pruébelo también usted mismo.
¿Por qué Firefox/Safari/Chrome/Opera no puede obtenerlo en el método 2? La razón es que la implementación interna del método getElementById en estos navegadores debe depender de este (documento), mientras que IE no lo necesita. O en otras palabras, el método 2 dice que esto falta cuando se llama en Firefox/Safari/Chrome/Opera. El siguiente es un ejemplo simple.
Copie el código de código de la siguiente manera:
//Definir una función mostrar
función mostrar(){alerta(este.nombre);}
//Definir un objeto p con atributo de nombre
var p = {nombre:'Jack'};
show.call(p); // -> 'Jack'
mostrar(); // -> ''
show.call(nulo); // -> ''<BR>
Puede ver que la implementación de show se basa en esto (en pocas palabras, esto se usa en el cuerpo del método. Por lo tanto, si el entorno (contexto de ejecución) al llamar no tiene el atributo de nombre, no se obtendrá el resultado esperado).
En otras palabras, IE6/7/8 no usa esto al implementar document.getElementById, pero IE9/Firefox/Safari/Chrome/Opera necesita usarlo, donde este es el objeto del documento. Cuando se llama directamente al método 2, el objeto interno this es la ventana, por lo que el método 2 no puede obtener el elemento normalmente según el ID en Firefox/Safari/Chrome/Opera.
Si cambia el entorno de ejecución de document.getElementById a documento en lugar de ventana, puede usar $ normalmente. como sigue
Copie el código de código de la siguiente manera:
// Reparar document.getElementById
document.getElementById = (función(función){
función de retorno(){
return fn.apply(documento,argumentos);
};
})(document.getElementById);
// Después de la reparación, asigne valor a $, $ se puede usar normalmente.
var $ = documento.getElementById;
Nuevamente, el nuevo método de vinculación para la función en ECMAScript5 puede lograr el mismo efecto.
Copie el código de código de la siguiente manera:
// Método 3
var $ = document.getElementById.bind(documento);
Pero actualmente el método 3 sólo es compatible con IE9/Firefox/Chrome/.
Después de analizar la situación de getElementById, es fácil entender por qué los siguientes métodos difieren en distintos navegadores.
Copie el código de código de la siguiente manera:
var prinf = documento.escribir;
prinf('<h3>Test prinf</h3>'); // IE6/7/8 puede ejecutarse, otros navegadores informan errores
var prinfln = documento.writeln;
prinfln('<h3>Prueba prinfln</h3>'); // IE6/7/8 puede ejecutarse, otros navegadores informarán un error
var recarga = ubicación.recargar;
reload(); // IE6/7/8 se puede ejecutar, otros navegadores informarán un error
var ir = historia.ir;
go(-2); // IE6/7/8 se puede ejecutar, otros navegadores informarán un error