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.
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 oquerySelector
não fazer uso dessa estrutura sendo que pode-se identificar facilmente quando o seletor é um id.