document.getElementsByClassName exact match to class

Question

There are two similar classes - 'item' and 'item one'

When I use document.getElementsByClassName('item') it returns all elements that match both classes above.

How I can get elements with 'item' class only?

Solution 1

The classname item one means the element has class item and class one.

So, when you do document.getElementsByClassName('item'), it returns that element too.

You should do something like this to select the elements with only the class item:

e = document.getElementsByClassName('item');
for(var i = 0; i < e.length; i++) {
    // Only if there is only single class
    if(e[i].className == 'item') {
        // Do something with the element e[i]
        alert(e[i].className);
    }
}

This will check that the elements have only class item.

Live Demo

Solution 2

document.querySelectorAll('.item:not(.one)');

(see querySelectorAll)

The other way is to loop over the what document.getElementsByClassName('item') returns, and check if the one class is present (or not):

if(element.classList.contains('one')){
  ...
}

Solution 3

You're going to want to make your own function for exact matches, because spaces in a class means it has multiple classes. Something like:

function GetElementsByExactClassName(someclass) {
  var i, length, elementlist, data = [];
  // Get the list from the browser
  elementlist = document.getElementsByClassName(someclass);
  if (!elementlist || !(length = elementlist.length))
    return [];
  // Limit by elements with that specific class name only
  for (i = 0; i < length; i++) {
    if (elementlist[i].className == someclass)
      data.push(elementlist[i]);
  }
  // Return the result
  return data;
} // GetElementsByExactClassName

Solution 4

If you have jQuery, it can be done using the attribute equals selector syntax like this: $('[class="item"]').

If you insist on using document.getElementsByClassName, see the other answers.

View more solutions

Comments

[adeneo]

The last one is'nt a similar class, it's the exact same class, and the class one, space seperation means two different classes !

[ATOzTOA]

No jquery specified by OP.

[ATOzTOA]

Right, but it is not recommended. See stackoverflow.com/questions/11503534/…

[Marat]

ok, I got it. But how I can get elements which belong to class 'item' and not class 'one'?

[nice ass]

That answer details the advantages of jQuery over using querySelectorAll. If you start talking about compatibility, then you should know that getElementsByClassName is also inconsistent across browsers. It's up to the OP to support older browsers, if (s)he wants to do so

[nbrooks]

if the className is specified as <elem class=" test " /> this won't include it, even though it only has the one class. Don't make your test be strict string equality. Otherwise, good answer +1

[Mark Ormston]

In that case, it is still correct because I was assuming he wanted the test to be EXACTLY what was in the class field. He didn't specify whether or not that was the requirement. But yeah, I can see that as well...

[nbrooks]

well it does exactly match the class...spaces are irrelevant in the class attribute. He didn't say exactly match the class attribute, because that's pointless