69

How do I get only one DOM element by class name? I am guessing that the syntax of getting elements by class name is getElementsByClassName, but I am not sure how many elements it's going to return.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Ismatjon
  • 1,149
  • 1
  • 8
  • 17

6 Answers6

100

document.getElementsByClassName('className') would always return multiple elements because conceptually Classes are meant to be applied to multiple elements. If you want only the first element in the DOM with that class, you can select the first element out of the array-like HTMLCollection returned.

var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];

Else, if you really want to select only one element. Then you need to use 'id' as conceptually it is used as an identifier for unique elements in a Web Page.

// HTML
<div id="myElement"></div>

// JS
var requiredElement = document.getElementById('myElement');
connexo
  • 53,704
  • 14
  • 91
  • 128
Rahat Khanna
  • 4,570
  • 5
  • 20
  • 31
  • 1
    getElementsByClassName returns a NodeList not an Array - FYI – rlemon Jan 29 '14 at 16:34
  • @Ismatjon I believe he was just suggesting the ID approach because it is cleaner overall. however the initial suggestion here holds true. – rlemon Jan 29 '14 at 18:01
  • the initial answer to use `nodelist[index in the node list]` is still correct however. The second part was a suggestion (all I was saying) – rlemon Jan 29 '14 at 18:05
  • 1
    *"Else, if you really want to select only one element. Then you need to use 'id'..."* Not at all. It's perfectly fine to have only a single element with a class. You find it, as some other answers here show, by using `document.querySelector(".the-class-name")`. – T.J. Crowder Mar 20 '22 at 18:45
52

Clarifications :

  1. getElementsByClassName returns a Node List and not an array

  2. You do not need jQuery

  3. What you were looking for was probably document.querySelector :

How do I get only one DOM element by class name?

var firstElementWithClass = document.querySelector('.myclass');

Also see: https://developer.mozilla.org/en/docs/Web/API/Document/querySelector

Zweih
  • 168
  • 10
sebilasse
  • 4,278
  • 2
  • 37
  • 36
  • Please may you provide some additional information on why you prefer using this to getElementsByClassName? – GeorgeButter Dec 15 '17 at 04:04
  • 6
    @Buts because querySelector (not querySelectorAll !) stops after the first match. However, querySelectorAll is much slower than getElementsByClassName. – Max Sep 16 '18 at 08:54
  • `document.getElementsByClassName` returns a (live) `HTMLCollection`, not a (static) `NodeList`. – connexo Sep 17 '22 at 07:28
8

You can use jQuery:

$('.className').eq(index)

Or you can use the javascript built-in method:

var elements = document.getElementsByClassName('className');

This returns a nodeList of elements that you can iterate and make what you want.

If you want only one, you can access the elements in the javascript version like this:

elements[index]
Lucas Reis
  • 441
  • 2
  • 9
  • 3
    I've made the edit - but be advised you will return a **nodeList** not an array. They are similar, but not the same. – rlemon Jan 29 '14 at 16:34
  • 2
    Also in your jQuery example it is still collecting all of the elements. http://api.jquery.com/eq/ is probably what you want there. – rlemon Jan 29 '14 at 16:35
  • 2
    I know how to use jQuery. this is not what I'm asking. I want a pure javascript approach. – Ismatjon Jan 29 '14 at 17:46
  • 1
    @Ismatjon as I mentioned in the other answer comments, the bracket notation index is going to solve this for you. I caution against using getElementsByClassName if you need to support IE8 (not supported). Instead read about document.querySelector and document.querySelectorAll – rlemon Jan 29 '14 at 18:02
  • @lsmatjon but you can access the first element with this approach above – Lucas Reis Jan 30 '14 at 15:21
  • `document.getElementsByClassName` returns a (live) `HTMLCollection`, not a (static) `NodeList`. – connexo Sep 17 '22 at 07:27
2

To anyone looking for a one liner

var first = document.getElementsByClassName('test')[0];
StefanJM
  • 1,533
  • 13
  • 18
0

Use NodeList.item().

For example:

var first = getElementsByClassName('test').item(0);
Felix Eve
  • 3,811
  • 3
  • 40
  • 50
  • 1
    Your code is using [`HTMLCollection.item()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item), not [`NodeList.item()`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/item). – connexo Sep 17 '22 at 07:31
0

You can try with this:

document.getElementsByClassName("className")[index]
Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
burmese-girl
  • 23
  • 5