Traversing DOM with JS. elementByTagName vs querySelector.

Hi Josh,

Here are the summaries for both.

querySelector

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.

getElementsByTagName

Returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node. The returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call document.getElementsByTagName() again.

A Bit confusing still right?

The querySelector method was introduced to IE9+ along with all other modern browsers, it's job when asked to search for an element is to traverse a tree that first matches as the browser is only looking for those specific elements and not everything in the DOM which is slower.

getElementsByTagName searches for EVERYTHING in the DOM, why? It's because methods such as this weren't designed with performance in mind so every time you call it the DOM is been queried every single time and been searched from top to bottom which is vastly slower.

These days a lot of developers use their own techniques for caching results so they don't have to make repeat queries, others tend to prefer just using libraries such jQuery, prototype, mootols etc. because they offer the faster solutions and fallbacks for older browsers but they create a lot of overhead in their own right.

If you don't need to support IE8< or are simply learning still then I always recommend querySelector as it's always going to do the job faster, use less resources of the users PC and ultimately makes your site perform faster when executing complex DOM queries.

Hope that helps and happy coding =)