getElementById vs. getElementByClassName

Question

Why isn't getElementByClassName used in the highlighted section of this exercise? If so, why can't we just use querySelector and/or querySelectorAll whenever we make a section versus having so many methods to choose from? (i.e. getElementbyTagName, getElementByClassNameNS)

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');

/*Why isn't getElementByClassName used here for all three of these?*/

const input = document.querySelector('input.description');
const p = document.querySelector('p.description');
const button = document.querySelector('button.description');



toggleList.addEventListener("click", () => {

      if (listDiv.style.display === 'none') {
       toggleList.textContent = 'Hide list';
       listDiv.style.display= 'block';

    }else {
       toggleList.textContent = 'Show list';
       listDiv.style.display= 'none';
  }



});  


button.addEventListener("click", () => {

    p.innerHTML= input.value + ':';


});

Secondly, when gathering your selection from the DOM, do these methods/properties create an array with them (or only some of them)? If so would the below code be valid if I wanted to select the third index from what was gathered?

ulList = document.querySelectorAll('li');

const mySelection = ulList[2];

Finally, for if-else conditionals, do I always need to pass a parameter into it in order for it to function? I mean this part

if (does something always need to go in here?) {


}else

Answer 1 · 2017-04-24T20:27:09Z

April 24, 2017 8:27pm

I'm not familiar with the exact exercise you're on, but for the first question - if you used getElementByClassName and the class name changed for some reason, the JavaScript would break.

Not sure about the second question...

Third question, yes something always needs to be inside the "if" parenthesis, otherwise anything inside the "if" block would never run because it will never evaluate to true.

Answer 2 · 2017-05-02T00:04:00Z

May 2, 2017 12:04am

Okay, so for your first question, if we used getElementsByClassName, then the input, p and button would all be in the returned collection of elements, because they all have a class of description. In this case, we want them separated, because they have different element types. If you used getElementsByClassName, you'd then need to loop through the collection and check the element types and assign them to the variables.

You could use querySelector and querySelectorAll for everything if you wanted, though I think in larger web applications it might cause a bit of a reduction in performance, as I'm pretty sure the others are a bit more efficient.

For the second question, none of these return an actual JavaScript array, so you won't be able to use the normal array methods on them. getElementById and querySelector return a single element, but getElementsByClassName returns a HTMLCollection and querySelectorAll returns a NodeList. They might sound a little strange, but they are effectively iterable objects that reference the actual DOM nodes/elements. You can loop over those in the same way you would loop over arrays. If you want to use array methods on them, you'd need to convert them to arrays.

And for the third, yes, you always need something in the parentheses of the if statement, that's just the required syntax. It should not be confused for a function, even though they both use a similar syntax. There is another syntax for if statements where you don't have the curly braces and instead place the conditional block on the same line, but it is harder to read and can even cause bugs in your code if not used correctly, so it is generally frowned upon by developers.

Welcome to the Treehouse Community

Looking to learn something new?

Greg Schudel

Greg Schudel

getElementById vs. getElementByClassName

2 Answers

Darrell Osborne

Darrell Osborne

Iain Simmons

Iain Simmons