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]");` <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> document.querySelector("#element a[target]").style.color = 'green'; <!-- language: lang-html --> <span id="element"> <a href="#" target="_blank"> link com target </a> </span> <!-- end snippet --> Ou uma seleção mais avançada?: `document.querySelector("#element ul li:nth-child(2)").style.color = "blue";` <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> document.querySelector("#element ul li:nth-child(2)").style.color = "blue"; <!-- language: lang-html --> <div id="element"> <ul> <li> Item 1 </li> <li> Item 2 - Alvo </li> <li> Item 3 </li> </ul> </div> <!-- end snippet --> 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`: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> document.querySelector('span, p').style.color='lightblue'; <!-- language: lang-html --> <span>[span] - Aqui será aplicado </span> <br> <span>[span] - Aqui não será aplicado </span> <p>[p] - Aqui não será aplicado </p> <!-- end snippet --> **getElementById** O mesmo é um pouco mais performático do que o `querySelector` e pode ser visto nesse teste [aqui](https://esbench.com/bench/57bdc462db965b9a00965c70) e nesse [aqui](https://jsperf.com/getelementbyid-vs-queryselector-vs-queryselector-by-id) 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.