How To Get The First Element With Specific Class Name Using JavaScript?

Get the First element with specific Class name using JavaScript

You will know how to get the first element with specific class name using JavaScript with the getElementsByClassName() function in this article. This is one of the most important skills when you work with DOM elements in JavaScript.

Get the first element with specific class name using JavaScript

Using getElementsByClassName()

This function returns an array of elements whose class name is equal to the specific name given.

Syntax:

getElementsByClassName(name)

Parameter:

  • name: The name of the class to search for elements

You can use the getElementsByClassName() function to get the first found element that matches the class name provided.

<html>
    <body>
    <h1 class="study">LEARN SHARE IT</h1>
     <h1 class="study">LEARN SHARE IT 2</h1>
  </body>
</html>
// Get elements with class name ‘study’.
let array = document.getElementsByClassName('study');

// Get the first element with the specific class ‘study’.
let first = array[0];
console.log(first)

Output:

<h1 class="study">LEARN SHARE IT</h1>

As you can see, the example below uses the getElementsByClassName method with the string ‘study’ as the parameter. This string indicates that the class name we are searching for is ‘study’ and hence the function returns an HTML Collection of those elements that match that class name. However, we want to get the first element, so we use the first index in the array to get what we need (array[0]). The result returned is exactly what we are expecting.

Using querySelector()

This method will return the first element that matches with a CSS selector declared in its argument.

Syntax:

querySelector(selector)

Parameter:

  • selector: a valid CSS selector string to find the class name.

However, using this method doesn’t return an array, instead, it returns the first found element in the document with a specific class name. In CSS, to match a class name, we just have to type the name in the string (which is different from id, in which we have to type ‘#’ instead).

<html>
    <body>
    <h1 class="study">LEARN SHARE IT</h1>
     <h1 class="study">LEARN SHARE IT 2</h1>
  </body>
</html>
// Get the first element with a specific class ‘study’.
let first = document.querySelector('h1');
console.log(first)

Output: 

<h1 class="study">LEARN SHARE IT</h1>

In the above example, we use the querySelector() function to select the first element with the class name ‘study’. As you can see in the HTML page, there are two elements h1 of the class ‘study’ but this method always returns the first one found in our HTML Document. It can be implied that this solution also produces the correct expected result as the first one. 

Summary

We have learned how to get the first element with specific class name using JavaScript in two different approaches. You can read more about working with elements’ class names in the article: How To Hide An Element By Class Using JavaScript?

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *