Diferença entre $ (document.body) e $ ('body')

104

Eu sou um iniciante em jQuery e ao passar por alguns exemplos de código eu encontrei:

$(document.body) e $('body')

Existe alguma diferença entre esses dois?

jquery document document-body Ashleedawg
fonte
1
Um é mais rápido, porém considerando que nunca seria chamado mais do que algumas vezes em uma única página, a diferença entre os dois é muito pequena.
Kevin B
$(body)não funciona para .on('click'...eventos, enquanto $(document.body)e $(document)ambos funcionam.
rybo111
3
A afirmação acima é falsa e também há uma pequena diferença no desempenho, cerca de 10% a favor de $ (document.body). Você pode ver a comparação aqui sitepoint.com/jquery-body-on-document-on
Sigismund

Respostas:

77

Eles se referem ao mesmo elemento, a diferença é que quando você diz document.bodyque está passando o elemento diretamente para o jQuery. Alternativamente, quando você passa a string 'body', o mecanismo do seletor jQuery tem que interpretar a string para descobrir a que elemento (s) ela se refere.

Na prática, qualquer um deles fará o trabalho.

Se você estiver interessado, há mais informações na documentação da função jQuery .

Justin Ethier
fonte
1
A primeira afirmação não está totalmente correta. Eles podem se referir ao mesmo elemento. Normalmente uniforme. Mas não sempre :). Veja minha resposta abaixo.
jvenema
18

As respostas aqui não estão totalmente corretas. Perto, mas há um caso extremo.

A diferença é que $ ('body') na verdade seleciona o elemento pelo nome da tag, enquanto document.body faz referência ao objeto direto no documento.

Isso significa que se você (ou um script invasor) sobrescrever o elemento document.body (vergonha!) $ ('Body') ainda funcionará, mas $ (document.body) não. Portanto, por definição, eles não são equivalentes.

Eu me arrisco a adivinhar que há outros casos extremos (como elementos globalmente identificados no IE) que também acionariam o que equivale a um elemento de corpo sobrescrito no objeto de documento, e a mesma situação se aplicaria.

jvenema
fonte
Não acho que seja possível definir document.bodycomo algo diferente de <body>: i.imgur.com/unJVwXy.png
mpen
Pode ser resolvido agora. Houve um tempo em que o FF e o IE permitiam que você fizesse isso e / ou se confundia com itens com um id de "corpo" (o erro que encontrei era um cliente usando nosso script no site de um cirurgião plástico com uma imagem marcada com o id "corpo"). Espero que não seja mais um problema :)
jvenema
12

Eu encontrei uma grande diferença no tempo ao testar em meu navegador.

Usei o seguinte script:

AVISO: executar isso irá congelar um pouco o seu navegador, podendo até travá-lo.

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
    $("body");
}

console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0){
    $(document.body);
}

console.timeEnd('element');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Expandir trecho

Fiz 10 milhões de interações e esses foram os resultados (Chrome 65):

seletor: 19591.97509765625ms
elemento: 4947.8759765625ms

Passar o elemento diretamente é cerca de 4 vezes mais rápido do que passar no seletor.

Phiter
fonte
7
Você ganha um voto positivo apenas pela "notação de seta", seu atrevido phiter!
KlaymenDK
1
Eu li sobre isso em algum lugar e queria usá-lo imediatamente XD
Phiter
Sim, mas - você realmente vai fazer isso 10 milhões de vezes? Por que não fazer esse tipo de análise onde é importante?
scrayne
@scrayne, esses testes de desempenho não são sobre casos de uso reais. É muito raro fazer 10 milhões de operações em um elemento como este. Mas OP queria saber a diferença e percebi que há uma diferença de desempenho, então acho que vale a pena notar.
Phiter
9

$(document.body)está usando a referência global documentpara obter uma referência para o body, enquanto $('body')é um seletor no qual o jQuery obterá a referência para o <body>elemento no document.

Nenhuma grande diferença que eu possa ver, nenhum ganho de desempenho perceptível de um para o outro.

Gabe
fonte
9
$(document.body)é mensuravelmente mais rápido de acordo com este artigo: sitepoint.com/jquery-body-on-document-on
Steve Harrison
6

Não deve haver nenhuma diferença, talvez o primeiro seja um pouco mais performante, mas eu acho que é trivial (você não deve se preocupar com isso, realmente).

Com ambos, você envolve a <body>tag em um objeto jQuery

Nicola Peluchetti
fonte
3

Outputwise ambos são equivalentes. Embora a segunda expressão passe por uma pesquisa de cima para baixo na raiz do DOM. Você pode querer evitar a sobrecarga adicional (por mais minúsculo que seja) se você já tiver o objeto document.body em mãos para o JQuery envolver. Consulte http://api.jquery.com/jQuery/ #Selector Context

santon
fonte