document.getElementById vs jQuery $ ()

É isto:

var contents = document.getElementById('contents'); 

O mesmo que isso:

 var contents = $('#contents'); 

Dado que jQuery é carregado?

Não exatamente!!

 document.getElementById('contents'); //returns a HTML DOM Object var contents = $('#contents'); //returns a jQuery Object 

No jQuery, para obter o mesmo resultado que document.getElementById , você pode acessar o object jQuery e obter o primeiro elemento no object (Lembre-se de que os objects JavaScript são semelhantes aos arrays associativos).

 var contents = $('#contents')[0]; //returns a HTML DOM Object 

Não.

Chamar document.getElementById('id') retornará um object DOM bruto.

Chamar $('#id') retornará um object jQuery que envolve o object DOM e fornece methods jQuery.

Assim, você só pode chamar methods jQuery como css() ou animate() na chamada $() .

Você também pode escrever $(document.getElementById('id')) , que retornará um object jQuery e será equivalente a $('#id') .

Você pode obter o object DOM subjacente de um object jQuery escrevendo $('#id')[0] .

Perto, mas não é o mesmo. Eles estão recebendo o mesmo elemento, mas a versão do jQuery é envolvida em um object jQuery.

O equivalente seria este

 var contents = $('#contents').get(0); 

ou isto

 var contents = $('#contents')[0]; 

Estes irão puxar o elemento para fora do object jQuery.

Uma nota sobre a diferença de velocidade. Anexe o seguinte snipet a uma chamada onclick:

 function myfunc() { var timer = new Date(); for(var i = 0; i < 10000; i++) { //document.getElementById('myID'); $('#myID')[0]; } console.log('timer: ' + (new Date() - timer)); } 

Suplente comentando um fora e, em seguida, comente o outro. Nos meus testes,

document.getElementbyId em média cerca de 35ms (flutuando de 25ms até 52ms em cerca de 15 runs )

Por outro lado, o

O jQuery teve uma média de aproximadamente 200ms (variando de 181ms a 222ms em aproximadamente 15 runs ).

A partir deste teste simples, você pode ver que o jQuery levou cerca de 6 vezes mais tempo.

Claro, isso é mais de 10000 iterações, então em uma situação mais simples eu provavelmente usaria o jQuery para facilidade de uso e todas as outras coisas legais como .fadeTo e .fadeTo . Mas sim, tecnicamente getElementById é um pouco mais rápido .

Não. O primeiro retorna um elemento DOM, ou null, enquanto o segundo sempre retorna um object jQuery. O object jQuery estará vazio se nenhum elemento com o ID do contents foi correspondido.

O elemento DOM retornado por document.getElementById('contents') permite que você faça coisas como alterar o .innerHTML (ou .value ) etc, no entanto, você precisará usar methods jQuery no object jQuery.

 var contents = $('#contents').get(0); 

É mais equivalente, no entanto, se nenhum elemento com o ID do contents for correspondido, document.getElementById('contents') retornará null, mas $('#contents').get(0) retornará indefinido.

Um benefício em usar o object jQuery é que você não obterá nenhum erro se nenhum elemento for retornado, já que um object é sempre retornado. No entanto, você obterá erros se tentar executar operações no null retornado por document.getElementById

Não, na verdade, o mesmo resultado seria:

 $('#contents')[0] 

O jQuery não sabe quantos resultados seriam retornados da consulta. O que você recebe é um object jQuery especial que é uma coleção de todos os controles que correspondem à consulta.

Parte do que torna o jQuery tão conveniente é que a maioria dos methods chamados neste object que parecem ser para um controle, estão em um loop chamado em todos os membros da coleção.

Quando você usa a syntax [0], você pega o primeiro elemento da coleção interna. Neste ponto, você obtém um object DOM

Caso alguém mais acerte isso … Aqui está outra diferença:

Se o id contiver caracteres que não são suportados pelo padrão HTML (veja a pergunta SO aqui ), então o jQuery pode não encontrá-lo mesmo se getElementById o fizer.

Isso aconteceu comigo com um ID contendo “/” caracteres (ex: id = “a / b / c”), usando o Chrome:

 var contents = document.getElementById('a/b/c'); 

foi capaz de encontrar o meu elemento, mas:

 var contents = $('#a/b/c'); 

nao fiz.

Btw, a correção simples foi mover esse id para o campo de nome. JQuery não teve dificuldade em encontrar o elemento usando:

 var contents = $('.myclass[name='a/b/c']); 

Assim como a maioria das pessoas disse, a principal diferença é o fato de que ele é empacotado em um object jQuery com a chamada jQuery versus o object DOM bruto usando JavaScript direto. O object jQuery será capaz de fazer outras funções jQuery com ele, é claro, mas, se você só precisa fazer manipulação DOM simples, como estilo básico ou manipulação básica de events, o método JavaScript direto é sempre um pouco mais rápido que o jQuery t tem que carregar em uma biblioteca externa de código construída em JavaScript. Isso economiza um passo extra.

Uma outra diferença: getElementById retorna a primeira correspondência, enquanto $('#...') retorna uma coleção de correspondências – sim, a mesma ID pode ser repetida em um documento HTML.

Além disso, getElementId é chamado do documento, enquanto $('#...') pode ser chamado de um seletor. Portanto, no código abaixo, document.getElementById('content') retornará todo o corpo, mas $('form #content')[0] retornará dentro do formulário.

  

Header!

My Form

Pode parecer estranho usar IDs duplicados, mas se você estiver usando algo como o WordPress, um modelo ou plug-in pode usar o mesmo id que você usa no conteúdo. A seletividade do jQuery poderia ajudá-lo lá fora.

var contents = document.getElementById('contents');

var contents = $('#contents');

Os trechos de código não são os mesmos. primeiro um retorna um object Element ( origem ). O segundo, equivalente ao jQuery, retornará um object jQuery contendo uma coleção de zero ou um elemento DOM. ( documentação do jQuery ). Internamente, o jQuery usa document.getElementById() para eficiência.

Em ambos os casos, se mais de um elemento for encontrado, somente o primeiro elemento será retornado.


Ao verificar o projeto do github para jQuery, encontrei os seguintes trechos de linha que parecem estar usando códigos document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js linha 68 em diante)

 // HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); 

Eu desenvolvi um database noSQL para armazenar trees DOM em navegadores da Web, onde as referências a todos os elementos DOM na página são armazenadas em um índice curto. Assim, a function “getElementById ()” não é necessária para obter / modificar um elemento. Quando os elementos na tree DOM são instanciados na página, o database atribui chaves primárias substitutas a cada elemento. É uma ferramenta gratuita http://js2dx.com