document.getElementById vs jQuery $ ()

É isto:

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

O mesmo que este:

var contents = $('#contents');

Dado que o jQuery está 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 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

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].

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.

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 .

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

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

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']);

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.

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

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í.

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.

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

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

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