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 trialJosh Lee
Courses Plus Student 6,290 PointsTraversing 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
26,676 PointsHi 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
Courses Plus Student 6,290 PointsJosh Lee
Courses Plus Student 6,290 PointsSo 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
26,676 PointsChris Shaw
26,676 PointsNo,
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.Correct, it will traverse the DOM until it finds an element that's
nodeNode
matches the one you have passed to it whereasquerySelector
skips everything other than what you've asked for.