Why does getElementById work but not getElementByClassName?

Question

I recently starting learning JS and for some reason I cannot get getElementByClassName to work for me. Here's my code.

//variable to store the ID h1
var id = document.getElementById("first");
//variable to store the class h1
var cs = document.getElementsByClassName("second");

//coloring the id 'first'
id.style.color = "red";

cs.style.color = "blue";

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Site</title>
  </head>
  <body>
    <h1 id="first">This is an ID</h1>
    <h1 class="second">This is a class</h2>

    <script src="index.js"></script>
  </body>
</html>

The element with an ID is changing color but the one with a class isn't. Any help would be greatly appreciated.

Note that one involves "element" (singular) but the other is "elements". — Pointy, Feb 07 '18 at 19:26
getElementsByClassName returns a collection, not a single element, to make it work, use cs[0].style.color = "blue"; — Ryan Wilson, Feb 07 '18 at 19:27
@RyanWilson — While array-like in many ways, the return value is not an array. — Quentin, Feb 07 '18 at 19:27
Indeed, it's an [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) — msanford, Feb 07 '18 at 19:27

M. Gara · Accepted Answer · 2018-02-07T19:30:32.213

1

getElementById returns one single element as you should not have multiple element with the same Id in the DOM.

getElementsByClassName returns an HTMLCollection as many elements can share the same class name.

try this instead :

//variable to store the ID h1
var id = document.getElementById("first");
//variable to store the class h1
var cs = document.getElementsByClassName("second");

//coloring the id 'first'
id.style.color = "red";

cs[0].style.color = "blue";

In real life use case you might wanna loop through the array.

edited Feb 07 '18 at 19:30

answered Feb 07 '18 at 19:27

M. Gara

809
12
26

That worked! Thanks a ton. – Tyler Polito Feb 07 '18 at 19:29
@TylerPolito You should up-vote and Accept (check mark) this answer, then. – msanford Feb 07 '18 at 19:30

Why does getElementById work but not getElementByClassName?

1 Answers1