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 One Solution

Posted by Thomas Thelen-Clemmons
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Thelen-Clemmons
Python Development Techdegree Graduate 13,757 Points

Best practice question

On question 5 the treehouse solution uses .getElementsByClassName('container')[1] but functionally .querySelectorAll('.container')[1] is the same other than practicing using different ways of selection is it "better" to use one of the other? Or just stick to one form of selection?

3 Answers

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hi Thomas,

I personally use querySelectorAll more often because it’s more versatile. I can use more powerful selectors (ie. attribute selectors, combinators, etc).

getElementsByClassName will only return classes.

The other difference is that querySelectorAll returns a static list versus live list.

Static means that if you store the value of querySelectorAll to a variable, the variable will hold whatever the value of querySelectorAll was when the variable was declared. But if you store getElementsByClassName to a variable, the variable holds the value of whatever getElementsByClassName returns at the time the variable is called (so it would account for changes in the DOM).

Thomas Thelen-Clemmons
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Thelen-Clemmons
Python Development Techdegree Graduate 13,757 Points
Thomas Thelen-Clemmons
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Thelen-Clemmons
Python Development Techdegree Graduate 13,757 Points

Thanks that clears up a lot for me!

Alsaig Sandra
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alsaig Sandra
Front End Web Development Techdegree Graduate 15,434 Points
Alsaig Sandra
.a{fill-rule:evenodd;}techdegree seal-36
Alsaig Sandra
Front End Web Development Techdegree Graduate 15,434 Points

Thanks you guys! Helped me a bunch!