7

Busquei algumas informações na internet sobre isso já, inclusive no SOen, entretanto ainda não consegui chegar a uma conclusão exata.

Devo apontar que a questão não se refere somente a performance, mas a situações inusitadas e boas práticas.

Enfim. Fazer

document.getElementById('teste');

ou

document.querySelector("#teste");

retorna a mesma coisa. Sei que o getElementById é aproximadamente 5x mais rápido, mas acredito que existam situações onde o uso do querySelector seriam melhores. Legibilidade talvez?

Se getElementById é mais rápido, em quais situações o querySelector se prova uma melhor opção?

Obs.: a questão se refere apenas ao caso de captura de IDs.

4
  • 3
    Por curiosidade: por que o getElementById é aprox. 5x mais rápido? Tem algum lugar que eu possa ver sobre isso? Eu até imagino que deva existir outra estrutura separada com os ids, mas não vejo motivo para o querySelector não fazer uso dessa estrutura sendo que pode-se identificar facilmente quando o seletor é um id.
    – Jéf Bueno
    Commented 26/10/2018 às 14:50
  • 2
    getElementById vs. getElementsByClassName vs. querySelector vs. jQuery executado no meu navegador: i.sstatic.net/2ZA2u.png. Nada absoluto, mas são alguns números.
    – Woss
    Commented 26/10/2018 às 15:11
  • 1
    "Sei que o getElementById é aproximadamente 5x mais rápido" - Tem alguma fonte / benchmarks a suportar esta afirmação ?
    – Isac
    Commented 26/10/2018 às 15:14
  • @Isac Li isso em alguns locais, incluindo no SOen: stackoverflow.com/questions/15046356/… mas não posso afirmar ser uma fonte totalmente confiável, então estejam livres para me corrigir. Commented 26/10/2018 às 15:31

1 Resposta 1

16

Além da performance envolvida (getElementById é um pouco mais performático, irei citar alguns testes mais abaixo) podemos considerar:

QuerySelector

A vantagem de seu uso, ao contrário de document.getElementById, document.querySelector pode retornar classes, além disso, é possível usar seletores CSS, o que não é possível fazer com o getElementById.

Exemplo:

document.querySelector("#element a[target]");

document.querySelector("#element a[target]").style.color = 'green';
<span id="element"> <a href="#" target="_blank"> link com target </a> </span>

Que tal uma seleção mais avançada?

document.querySelector("#element ul li:nth-child(2)").style.color = "blue";

document.querySelector("#element ul li:nth-child(2)").style.color = "blue";
<div id="element">
    <ul>
        <li> Item 1 </li>
        <li> Item 2 - Alvo </li>
        <li> Item 3 </li>
    </ul>
</div>

Vale lembrar que o querySelector irá pegar apenas o primeiro elemento que for encontrado no documento.

no exemplo abaixo, apenas no primeiro item foi aplicado o CSS:

document.querySelector('span, p').style.color='lightblue';
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui não será aplicado </span>  

<p>[p] -  Aqui não será aplicado </p>

Se for preciso realizar a seleção de múltiplos elementos, utilize querySelectorAll que irá retornar um objeto NodeList, para aplicar os estilos em todos, basta aplicar um loop como no exemplo abaixo:

//selecionando todos os elementos span e p
let obj = document.querySelectorAll('span, p'); 

console.log("tipo: " + typeof obj);
console.log("Quantidade: " +obj.length);

//aplicando o estilo em todos os elementos selecionados
for(let i of obj) {  
    i.style.color= "blue";
}
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui também será aplicado </span> 
<p>[p] -  Aqui também será aplicado </p>

getElementById

O mesmo é um pouco mais performático do que o querySelector e pode ser visto nesse teste aqui e nesse aqui também.

Acredito que o seu uso deve ser feito sempre que for preciso selecionar um elemento pelo id, uma seleção como o exemplo abaixo, considero inviável pelo fato de existir uma função específica para buscas por identificadores.

Exemplo inviável :

document.querySelector("[id=elemento]");

Conclusão

Se precisas selecionar apenas um elemento pelo identificador, é mais viável utlizar document.getElementById pois o mesmo é específico para essa finalidade, caso precise usar uma seleção mais precisa/avançada, use document.querySelector pelo fato de ter a liberdade de utilizar seletores CSS, o que é uma grande vantagem.

Nada impede de usares querySelector para selecionar um elemento pelo id, além do mais, dificilmente uma aplicação sofrerá de baixa performance por conta disso.

3
  • Boa resposta. Vou esperar para ver se mais alguma aparece com mais informações, caso contrário marco a sua como aceita. Commented 26/10/2018 às 15:40
  • Ainda tenho a intenção de realizar alguns reajustes. Commented 26/10/2018 às 15:44
  • Acho que agora está ok. Commented 26/10/2018 às 16:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .