Which JavaScript function is faster [duplicate]

Question

I have heard that querySelector and querySelectorAll are new methods to select DOM elements. How do they compare to the older methods, getElementById and getElementsByClassName in terms of performance and browser support?

How does the performance compare to using jQuery's query selector?

What is the difference between querySelector and getElementById? When should we use querySelector instead of getElementById? Is there any example which is not possible using getElementById?

Answer 1

"Better" is subjective.

querySelector is the newer feature.

getElementById is better supported than querySelector (not that it matters today, some years after this answer was originally written).

querySelectorAll is better supported than getElementsByClassName but querySelectorAll gives you a static node list while getElementsByClassName gives you a live node list.

querySelector lets you find elements with rules that can't be expressed with getElementById and getElementsByClassName

You need to pick the appropriate tool for any given task.

(In the above, for querySelector read querySelector / querySelectorAll).