Skip to main content
5 de 8
adicionando exemplos e correções aplicadas
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38

Além da performance envolvida (getElementById é mais performático, irei citar teste 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>

Ou 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>

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.

Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38