Like @Paul_Wilkins I too have pretty much moved away from using getElementById().
Because querySelector can target elements by their id, as well as a whole lot more - virtually anything that can be targeted with CSS selectors - getElementById does seem to be moot now that browser support is not an issue.
Paul brought up a good question. Are there any good reasons to use getElementById instead of querySelector?
I have not researched nor done any benchmark testing, but the only thing I can think of is that maybe browsers “index” elements with id values so that “getting” them is less resource intensive and faster than “selecting” them. But even if this were to be true, I have a hard time imagining it to be any more than a negligible difference.
Personally I find that .getElementById() is a bit more of a statement when reading the code… like, I’m not interested in the first element that happens to match the selector, but in this unique element.
As for performance, getting by ID is definitively faster… I mean technically you don’t even have to use document.getElementById('my-id'), but could also just use window['my-id']… not sure if this is some sort of proxy-behaviour though, or if all references are actually there from the start.
Edit: I just did some performance tests too and it seems the window version is actually by far the slowest… so yet another reason not to use it. ^^
Considering the performance aspect of using .getElementById(), are there any common scenarios where the difference of performance gives a significantly noticeable improvement to the user?
Given that there aren’t, that implies that the main benefit of using .getElementById() is not due to performance, but more along the lines of what @m3g4p0p is saying in terms being an indicator of intent to programmers reading the code.
I don’t know if the results in that test are skewed by outliers. but I calculated a rough per call difference of around .0001 ms for querySelector and .000002 ms for getElementById. Even though querySelector is ~97% slower than getElementById, I would consider the amount of execution time to be negligible and that purposely using getElementById for the sole purpose of saving time to be “micro-optimizing”. AFAIK humans are not capable of perceiving visual changes that are faster than around 120fps so that both would appear to be equally as fast. Granted, even microseconds can add up, but I can’t recall having ever had more than a couple dozen element references at most in any single script.
Maybe that getElementById is a method of the global document object and querySelector uses an API to retrieve element nodes from the DOM could be a deciding factor but I have never run into any problems with querySelector that precluded me from using it.
getElementById() is indeed a method of (only) the document object and querySelector() a method of document & the Element interface (which means that querySelector() may miss an element if called from the wrong starting point).