querySelector vs getElementById

One common thing I notice among peers is a little bit of confusion as to the difference in querySelector and other element grabbing methods such as getElementById or getElementsByClassName. They're all methods intended for DOM manipulation by grabbing whatever element you're attempting to manipulate and can be used pretty interchangeably, so why use one over the other? Let's get into that.

First let's start with a visually apparent aspect. Arguably the getElementById and getElementsByClassName have a more semantic approach to the code. They read very well as to exactly what they're doing with your code, they are either grabbing by Id or by ClassName. While that may be true that they read well querySelector also states that it's selecting from a query and from there it's dependant on the argument.

Now what's the big difference in functionality knowing that they both grab elements? How they handle it. When you assign a variable by getElementById like so,

const banner = document.getElementById("banner")

you don't have to specify that you're looking for an id in the document it's in the name and the entire functionality of the method. When you do the same using querySelector like so,

const banner = document.querySelector("#banner")

you're using CSS selectors so you have to include the # to specify that it's an id you're looking for and that's the key difference.

Knowing that querySelector is handled the same way CSS selectors are gives you an idea as to what that might mean in terms of scope of power. While the other element grabbers are capable of grabbing any element that's been assigned a class or id querySelector can grab so much more with so much less assignment. For instance you can chain your selectors just like in CSS,

const title = document.querySelector('#main h1')

you're capable of grabbing that h1 by specifying that you're looking for the h1 that follows your main id. Imagine how much less class assignment you will have to do and how many less names you'll have to come up with just for DOM manipulation.

It's also important to note that querySelector will grab the first element that meets your criteria so it's best to be familiar with CSS selection which is a handy skill to have a handle on as is. If you're trying to grab multiple elements there is of course the querySelectorAll that handles the same in selection but grabs all elements that match the selector.

One last difference worth mentioning between the selectors is that querySelector is simply newer. All major browsers do support it however if you're using an older browser or a less supported one getElementById may be more suitable for your purposes. Now it's not considered wrong or bad coding to use the older methods by any means and in fact some people prefer it due largely to its semantic clarity but whichever you choose to use in your code it's best practice to stick with one or the other and not mix them up. It becomes a headache to see elements being grabbed by this way and that and is just best left avoided. You will likely see querySelector more often than not as the industry adopts it simply because it is the more powerful of the two tools. Hopefully this cleared up any confusion on the subject and happy coding!