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.