Tutorials Tonight
Follow Us

JavaScript Get Element By Class


In this tutorial, you will learn how to get an element by the class name of the element. We will walk through different methods and will look at various examples.

When you want to play with DOM (Document Object Model) one of the most basic and important thing that you would like to do is select a DOM element.

There are many ways to get an element within the DOM like, get element by id, get element by class, get element by tag name, etc. We will look here at how to get an element by class.

    Table of content

  1. Using getElementsByClassName method
  2. querySelector method
  3. querySelectorAll method

1. Using getElementsByClassName JavaScript

The getElementsByClassName method is used to get element(s) by class names.

This method returns array-like objects of all the elements that include specified class.

It can be called in 2 different ways:

  1. Called on document object: When called on a document it searches complete document and returns all the element that includes specified class
  2. Called on some element: When called on a certain element then only child elements are searched for that class

Here is an example to get all elements with a class named 'box' in the document.

1. Get all elements in the document by class

<div id="id1">
  <p class="box">box 1</p>
  <p class="bar">bar 1</p>
  <p class="box">box 2</p>
  <p class="bar">bar 2</p>
</div>
<p class="box">box 3</p>
<p class="bar">bar 3</p>
<p class="box">box 4</p>
<p class="bar">bar 4</p>
<script>
  let elements = document.getElementsByClassName("box");
  // outputs all elements with class box as a HTMLCollection
  console.log(elements);
</script>

Output:

output 1

Note: The method name is getElementsByClassName not getElementByClassName. Elements because there could be more than 1 element with a class name in a webpage.

An example to get all elements with a class named 'box' in a specific element.

2. Get elements only in the parent element by class

<div id="id1">
  <p class="box">box 1</p>
  <p class="bar">bar 1</p>
  <p class="box">box 2</p>
  <p class="bar">bar 2</p>
</div>
<p class="box">box 3</p>
<p class="bar">bar 3</p>
<p class="box">box 4</p>
<p class="bar">bar 4</p>
<script>
  let parentElements = document.getElementById("id1");
  let elements = document.getElementsByClassName("box");
  // outputs elements with class box only in parent element
  console.log(elements);
</script>

Output:

output 2

Accessing element

The elements returned by the getElementsByClassName method can be accessed by its index values.

Each element has its index value in HTMLCollection starting from 0. So if you want to get the first element with some class use elements[0].

Access element and add style to it

let parentElement = document.getElementById("id1");
function addStyle() {
  let elements = parentElement.getElementsByClassName("box");
  for (let i = 0; i < elements.length; i++) {
    let myElement = elements[i]; // access element
    myElement.style.background = "lightgreen";
  }
}

Get element with more than one class

If you want to select all the elements that have more than one mentioned classes than passing the desired class names separated by spaces in the getElementsByClassName method.

Get elements with both classes 'box' and 'bar'

<p class="box bar">Both box and bar class</p>
<p class="box">Only box class.</p>
<p class="bar">Only bar class.</p>
<p class="box bar">Both box and bar class</p>
<p class="bar">Only bar class.</p>
<p class="box">Only box class.</p>
<button onclick="addStyle()">Find element with classes box and bar</button>

<script>
  function addStyle() {
    let elements = document.getElementsByClassName("box bar");
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.background = "lightgreen";
    }
  }
</script>

Output:

output 3

2. Using querySelector JavaScript

The querySelector method is a selector method in JavaScript which use CSS selectors to find an element within the document.

It returns the first element within the document that matches the specified selector.

To get an element with a class pass the class name with a dot and it will return the first element that has the specified class.

Get the first element with the specified class

<p class="box">Box number 1.</p>
<p class="box">Box number 2.</p>
<p class="box">Box number 3.</p>
<p class="box">Box number 4.</p>
<p class="box">Box number 5.</p>
<button onclick="addStyle()">Findfirst element with class 'box'</button>

<script>
  function addStyle() {
    let element = document.querySelector(".box");
    element.style.background = "lightgreen";
  }
</script>

Output:

output 4

3. Using querySelectorAll javascript

The querySelectorAll is also a method to selects element on the basis of the CSS selector. The only difference between querySelector and querySelectorAll is that querySelectorAll selects all the element matching the selector as an array-like object.

Get all elements with the specified class

<p class="box">Box number 1.</p>
<p class="box">Box number 2.</p>
<p class="box">Box number 3.</p>
<p class="box">Box number 4.</p>
<p class="box">Box number 5.</p>
<button onclick="addStyle()">Findfirst element with class 'box'</button>

<script>
  function addStyle() {
    let elements = document.querySelectorAll(".box");
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.background = "lightgreen";
    }
  }
</script>

Output:

output 5

Conclusion

In this tutorial, you learned how to get an element by one or multiple classes in javascript by 3 different methods with their examples.

The methods discussed in this tutorial are querySelector, querySelectorAll and getElementsByClassName. The querySelector method is the most commonly used method to get an element by class name. The querySelectorAll method is used to get all the elements with the specified class name. The getElementsByClassName method is used to get all the elements with the specified class name.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.