Além da performance envolvida (getElementById
é mais performático, irei citar um teste mais abaixo para ser comprovado) 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]");
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 um elemento pelo identificador
, é mais performático usar document.getElementById
, caso precise usar uma seleção mais precisa, use document.querySelector
pelo fato de ter a liberdade de utilizar seletores CSS
, o que é uma grande vantagem.