Todos os colegas front-end da web estão familiarizados com document.getElementById. Durante o processo de desenvolvimento, muitas vezes precisamos usá-lo para obter o elemento com o ID da página xx. Desde que a veterana biblioteca JS Prototype se tornou popular, todo mundo gosta de abreviá-la assim.
Copie o código do código da seguinte forma:
// Método 1
função $(id){ retornar documento.getElementById(id);
Alguém já se perguntou por que está escrito desta forma em vez da seguinte?
Copie o código do código da seguinte forma:
// Método 2
var $ = document.getElementById;
Escrever $ desta forma é mais conciso e claro. Atribua o método de documento getElementById à variável $ e use $ para obter o elemento com o ID da página xx. Na verdade, o método 2 é viável no IE6/7/8 (há algumas mudanças no IE9), mas não no Firefox/Safari/Chrome/Opera. Por favor, teste você mesmo.
Por que o Firefox/Safari/Chrome/Opera não pode obtê-lo no método 2. A razão é que a implementação interna do método getElementById nesses navegadores precisa depender deste (documento), enquanto o IE não precisa disso. Ou em outras palavras, o método 2 diz que isso está faltando quando chamado no Firefox/Safari/Chrome/Opera. O seguinte é um exemplo simples.
Copie o código do código da seguinte forma:
//Define uma função show
function show(){alert(este.nome);}
//Define um objeto p com atributo name
var p = {nome:'Jack'};
show.call(p); // -> 'Jack'
mostrar(); // -> ''
show.call(nulo); // -> ''<BR>
Você pode ver que a implementação de show depende disso (simplesmente falando, isso é usado no corpo do método). Portanto, se o ambiente (contexto de execução) ao chamar não tiver o atributo name, o resultado esperado não será obtido.
Em outras palavras, o IE6/7/8 não usa isso ao implementar document.getElementById, mas o IE9/Firefox/Safari/Chrome/Opera precisa usar isso, onde este é o objeto do documento. Quando o método 2 é chamado diretamente, o interno é o objeto window, portanto o método 2 não pode obter o elemento normalmente com base no ID no Firefox/Safari/Chrome/Opera.
Se você alterar o ambiente de execução de document.getElementById para document em vez de window, poderá usar $ normalmente. do seguinte modo
Copie o código do código da seguinte forma:
// Corrige document.getElementById
document.getElementById = (função(fn){
função de retorno(){
return fn.apply(documento,argumentos);
};
})(document.getElementById);
// Após o reparo, atribua valor a $, $ pode ser usado normalmente.
var $ = document.getElementById;
Novamente, o novo método de ligação para função em ECMAScript5 pode obter o mesmo efeito.
Copie o código do código da seguinte forma:
// Método 3
var $ = document.getElementById.bind(documento);
Mas atualmente o método 3 é suportado apenas pelo IE9/Firefox/Chrome/.
Depois de analisar a situação de getElementById, é fácil entender por que os métodos a seguir diferem em vários navegadores.
Copie o código do código da seguinte forma:
var print=document.write;
prinf('<h3>Test prinf</h3>'); // IE6/7/8 pode ser executado, outros navegadores relatam erros
var prinfln = document.writeln;
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8 pode ser executado, outros navegadores reportarão um erro
var recarregar = localização.recarregar;
reload(); // IE6/7/8 pode ser executado, outros navegadores reportarão um erro
var go = histórico.go;
go(-2); // IE6/7/8 pode ser executado, outros navegadores reportarão um erro