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

Michael Williams
PLUS
Michael Williams
Courses Plus Student 8,059 Points
Posted by Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

Why does ".getElementsByTagName" ONLY work if I indicate the index location of the "ul"?

If I write, everything works: 

let list = document.getElementsByTagName("ul")[0];
list.className = "list";

let item = document.createElement("li");
item.innerHTML = "<input> Climb mountains";
list.appendChild(item);

However, if I leave off the index, I get an error. Why is that? 

let list = document.getElementsByTagName("ul");
list.className = "list";

let item = document.createElement("li");
item.innerHTML = "<input> Climb mountains";
list.appendChild(item);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>Practice Manipulating the DOM</title>
 </head>
<body>
  <div class="container">
    <h1></h1>
    <p class="desc"></p>
    <ul>
      <li><input> Play music</li>
      <li><input> Swim</li>
      <li><input> Bike ride</li>
      <li><input> Code</li>
    </ul>
    <div class="extra">
      <p>This is extra content you need to delete.</p>
    </div>
  </div>
  <script src="js/scripts.js"></script>
</body>
</html>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! It's because getElementsByTagName returns a live HTMLCollection. This is very much like an array, but technically not an array so it doesn't have all the fancy methods like pop, push, shift etc. But even if the collection returned only contains one item, it is still in a somewhat array-like format.

And because you can't add a className on a collection, only on an individual item, you must tell it which item it needs to add the className to.

There are several that work this way like getElementsByClassName and getElementsByTagName, but the exception here is getElementById which will only ever return a single node in the DOM. Note the choice of words in these method names. The first two are "Elements", but the last one is "Element" and that is intentional.

Hope this helps! :sparkles:

Michael Williams
Michael Williams
Courses Plus Student 8,059 Points
Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

Yep! This helps. Thank you so much. It's sloooooooowly clicking for me.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi again, Michael Williams! I know I've already answered, but I'm wondering if this example would make it a bit clearer. I'm truly interested. The reason you can't set the className on a collection is much the same reason you can't toUpperCase() on an array of strings.

Take this array for example:

let fruits = ["banana", "apple", "orange"];

The following will cause an error because toUpperCase() is not a method on an Array. It is only available on a string:

console.log(fruits.toUpperCase());

But this one works like a charm because we're selecting a string:

console.log(fruits[0].toUpperCase());

Was this helpful in making it "click"? :sparkles:

Michael Williams
PLUS
Michael Williams
Courses Plus Student 8,059 Points
Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

Jennifer Nordell, yes that's super helpful. I think one of the things that's challenging is remembering all of the little nuances for what each piece of code does (not just how to use it). I take notes and rewatch videos all the time, but it's easy to miss big things that seem little like how getElementsByTagName returns a live HTMLCollection. Maybe it's just me, but when I watch the videos I get the broad strokes like how getElementsByTagName works by pointing to a div, li, etc. And when you miss those little-big things, you don't realize that you're missing what you don't know. So repetition is extremely helpful, as it allows me to hit these walls that lead me to the community for help.

In an ideal world, I would be smarter than the average bear so that I don't miss things in videos, even after watching them 9,000 times. 😆

Thank you for really taking an interest in fostering those trying to learn this foreign language.