Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Traversing Elements

Josh Lee
PLUS
Josh Lee
Courses Plus Student 6,290 Points

Traversing DOM with JS. elementByTagName vs querySelector.

Perhaps I'm not understanding .querySelector('') very well. What 's the difference between using that and using .getElementsByTagName('') ?

1 Answer

Chris Shaw
Chris Shaw
26,676 Points

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 =)

Josh Lee
Josh Lee
Courses Plus Student 6,290 Points

So to clarify:

querySelector will only find the first tag and then stop.

getElementsByTagName will select all tags. And will be slower if you only want to use one instance of the tag?

Chris Shaw
Chris Shaw
26,676 Points

querySelector will only find the first tag and then stop.

No, querySelector will continue if another match is found, if only one instance of the query exists or if it reaches the end of the DOM then it will stop.

getElementsByTagName will select all tags. And will be slower if you only want to use one instance of the tag?

Correct, it will traverse the DOM until it finds an element that's nodeNode matches the one you have passed to it whereas querySelector skips everything other than what you've asked for.