Should getElementById or querySelector be used here?

JavaScript
1

Which would you use here?

getElementById or querySelector

https://jsfiddle.net/192h0w85/27/

document.getElementById('sent')
const value = document.getElementById('input');

or like this?
https://jsfiddle.net/192h0w85/28/

document.querySelector('#sent')
const value = document.querySelector('#input');

querySelector

<script>
  document.querySelector('#sent').addEventListener('click', function() {
    const player = document.querySelector('.player');
    const value = document.querySelector('#input');
    player.volume = 1.0;
    player.src = value.value;
  });

</script>

getElementById

<script>
  document.getElementById('sent').addEventListener('click', function() {
    const player = document.querySelector('.player');
    const value = document.getElementById('input');
    player.volume = 1.0;
    player.src = value.value;
  });
</script>
2

From what I understand (and please, if anyone know better, let me know if Im missing the mark cause Id like to make sure I get this too) getElementById is more specific, while querySelector is more generic…so there are speed issues to consider. getElementById will only look at any IDs on the page, while querySelector looks at every thing to find the match. But that also means its more flexible.

So my take on it…if I know Im trying to target an Id or class name, Id use getElementById or getElementsbyClassName since they are specific and for the speed factor, but for anything else Id use querySelector.

1 Like
3

I checked on jsperf.com and getElementById is considerably faster.
see: jsperf.com getElementById vs. querySelector

1 Like