document.getElementById vs jQuery $ ()

620

É isto:

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

O mesmo que este:

var contents = $('#contents');

Dado que o jQuery está carregado?

Phillip Senn
fonte
10
Além dos pontos levantados nas respostas, a versão do jQuery é app. 100x mais lento.
8
isso está provado em algum lugar?
FranBran
12
@torazaburo Na verdade, a versão do jQuery não é nem três vezes mais lenta (pelo menos no Chrome). Veja: jsperf.com/getelementbyid-vs-jquery-id/44
Michał Perłakowski 9/16
2
@ MichałPerłakowski nesse link, a versão jquery é 10 vezes mais lenta. 26mil vs 2.4mil
Claudiu Creanga
1
O link atualizado correto para JSPerf é: jsperf.com/getelementbyid-vs-jquery-id No meu caso (FF 58), é 1000 vezes mais lento. De qualquer forma, o jQuery ainda realiza 2,5 milhões de operações por segundo. Em geral, isso não é um problema e certamente não pode ser comparado em termos de funcionalidade.
Diego Jancic

Respostas:

1017

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 document.getElementById, você pode acessar o objeto jQuery e obter o primeiro elemento do objeto (lembre-se de que objetos JavaScript agem de maneira semelhante às matrizes associativas).

var contents = $('#contents')[0]; //returns a HTML DOM Object
John Hartsock
fonte
24
Para qualquer pessoa interessada document.getElementBy, não funciona corretamente no <IE8. Ele também obtém elementos, nameportanto, teoricamente, você poderia argumentar que document.getElementByIdnão é apenas enganoso, mas pode retornar valores incorretos. Acho @ John novo este, mas eu pensei que não iria prejudicar a adicioná-lo no.
Lime
14
Tome cuidado se o seu identificador não for fixo. $('#'+id)[0]não é igual a, document.getElementById(id)porque idpode conter caracteres que são tratados especiais no jQuery!
Jakob
1
Isso foi muito útil - nunca soube disso! Tenho certeza de que já o usei antes, o que me deixa perplexo. Ei, você aprende algo todos os dias! Obrigado!
jedd.ahyoung
3
google jquery equivalent of document.getelementbyide o primeiro resultado é este post. obrigado!!!
Ajax
$('#contents')[0].idretorna o nome do ID.
Omar
139

Não.

A chamada document.getElementById('id')retornará um objeto DOM bruto.

A chamada $('#id')retornará um objeto jQuery que agrupa o objeto DOM e fornece métodos jQuery.

Portanto, você só pode chamar métodos jQuery como css()ou animate()na $()chamada.

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

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

SLaks
fonte
4
Você sabe qual é mais rápido - $ (document.getElementById ('elemento')) vs $ ('# elemento')?
Ivan Ivković
10
@ IvanIvković: O primeiro é mais rápido, pois não envolve a análise de cordas.
SLaks
1
@SLaks Qual é a principal diferença entre o objeto DOM bruto e o objeto jQuery? Só que, usando o objeto jQuery, temos a capacidade de aplicar métodos jQuery?
precisa saber é o seguinte
@ Roxy'Pro: São objetos diferentes. Objetos jQuery envolvem objetos DOM. Veja a documentação.
SLaks
Este documento JavaScript DOM Objects vs. jQuery Objects parece útil. In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.
user3454439
31

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

O equivalente seria este

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

ou isto

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

Isso puxará o elemento para fora do objeto jQuery.

RightSaidFred
fonte
29

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));
}

Alterne comentar um fora e depois comentar o outro. Nos meus testes,

document.getElementbyId teve uma média de cerca de 35ms (flutuando de 25msaté 52msaproximadamente 15 runs)

Por outro lado, o

jQuery média de cerca de 200 ms (que vão desde 181msa 222msem cerca de 15 runs).

Nesse teste simples, você pode ver que o jQuery demorou cerca de 6 vezes mais.

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

nurdyguy
fonte
Obrigado por esta resposta. Eu queria perguntar, devo substituir tudo $('#someID') por document.getElementById("someID") ? Estou trabalhando em algo em que tenho usado extensivamente $('#someID')e minha página é lenta para entradas de arquivos grandes. Por favor, sugira-me qual deve ser minha decisão.
Mazhar MIK
Se você estiver reutilizando o mesmo várias vezes no mesmo escopo, salve-o, goste var $myId = $('#myId');e reutilize a variável salva $myId. Encontrar por ID geralmente é uma coisa bastante rápida, portanto, se a página estiver lenta, provavelmente há um motivo diferente.
Nurdyguy 11/03/19
Obrigado @nurdyguy. Isso foi útil. Vou tentar implementar isso.
Mazhar MIK
17

Não. O primeiro retorna um elemento DOM, ou nulo, enquanto o segundo sempre retorna um objeto jQuery. O objeto jQuery ficará vazio se nenhum elemento com o ID de contentscorresponder.

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 os métodos jQuery no objeto jQuery.

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

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

Um benefício em usar o objeto jQuery é que você não receberá nenhum erro se nenhum elemento for retornado, pois um objeto é sempre retornado. No entanto, você receberá erros se tentar executar operações nullretornadas pordocument.getElementById

Matt
fonte
15

Não, na verdade o mesmo resultado seria:

$('#contents')[0] 

O jQuery não sabe quantos resultados serão retornados da consulta. O que você recebe de volta é um objeto jQuery especial, que é uma coleção de todos os controles correspondentes à consulta.

Parte do que torna o jQuery tão conveniente é que a maioria dos métodos chamados nesse objeto, que parecem destinados a um controle, estão na verdade em um loop chamado em todos os membros da coleção

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

Andrey
fonte
10

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

Se o ID contiver caracteres que não são suportados pelo padrão HTML (consulte a pergunta SO aqui ), o jQuery poderá não encontrá-lo, mesmo que getElementById o faça.

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 meu elemento, mas:

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

nao fiz.

Btw, a correção simples era mover esse ID para o campo de nome. O JQuery não teve problemas para encontrar o elemento usando:

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

Como a maioria das pessoas disse, a principal diferença é o fato de ele estar envolvido em um objeto jQuery com a chamada jQuery versus o objeto DOM bruto usando JavaScript direto. O objeto jQuery poderá executar outras funções do jQuery, é claro, mas, se você precisar fazer uma manipulação DOM simples, como estilo básico ou manipulação básica de eventos, o método JavaScript direto será sempre um pouco mais rápido que o jQuery, já que você não ' Não é necessário carregar uma biblioteca externa de código criada em JavaScript. Ele salva uma etapa extra.

Kobby
fonte
5

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

var contents = $('#contents');

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

Nos dois casos, se mais de um elemento encontrado, apenas o primeiro elemento será retornado.


Ao verificar o jQuery no projeto github, encontrei os seguintes trechos de linha que parecem estar usando os 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] );
Nipuna
fonte
4

Outra diferença: getElementByIdretorna a primeira correspondência, enquanto $('#...')retorna uma coleção de correspondências - sim, o mesmo ID pode ser repetido em um documento HTML.

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

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

Pode parecer estranho usar IDs duplicados, mas se você estiver usando algo como o Wordpress, um modelo ou plugin poderá usar o mesmo ID que você usa no conteúdo. A seletividade do jQuery pode ajudá-lo por aí.

steve banks
fonte
2

O jQuery é construído sobre JavaScript. Isso significa que é apenas javascript de qualquer maneira.

document.getElementById ()

O método document.getElementById () retorna o elemento que possui o atributo ID com o valor especificado e Retorna nulo se não existir nenhum elemento com o ID especificado. Um ID deve ser exclusivo em uma página.

Jquery $ ()

Chamar jQuery () ou $ () com um seletor de id como argumento retornará um objeto jQuery que contém uma coleção de zero ou um elemento DOM. Cada valor de id deve ser usado apenas uma vez em um documento. Se mais de um elemento tiver sido atribuído ao mesmo ID, as consultas que usam esse ID selecionarão apenas o primeiro elemento correspondente no DOM.

Hadi Mir
fonte
1

Desenvolvi um banco de dados noSQL para armazenar árvores DOM em navegadores da Web, onde as referências a todos os elementos DOM na página são armazenadas em um pequeno índice. Portanto, a função "getElementById ()" não é necessária para obter / modificar um elemento. Quando os elementos na árvore DOM são instanciados na página, o banco de dados atribui chaves primárias substitutas a cada elemento. É uma ferramenta gratuita http://js2dx.com

Gonki
fonte
1

Todas as respostas acima estão corretas. Caso queira vê-lo em ação, não se esqueça de ter o Console em um navegador onde é possível ver o resultado real:

Eu tenho um HTML:

<div id="contents"></div>

Vá para o console (cntrl+shift+c)e use esses comandos para ver seu resultado claramente

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

Como podemos ver, no primeiro caso, obtivemos a própria tag (ou seja, estritamente falando, um objeto HTMLDivElement). Neste último, na verdade, não temos um objeto simples, mas uma matriz de objetos. E, como mencionado por outras respostas acima, você pode usar o seguinte comando:

$('#contents')[0]
>>> div#contents
Mazhar MIK
fonte
1

Todas as respostas são antigas hoje, a partir de 2019, você pode acessar diretamente campos com chave id em javascript, basta experimentá-lo

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

Demo Online! - https://codepen.io/frank-dspeed/pen/mdywbre

frank-dspeed
fonte