document.getElementsByClassName exact match to class

12,753

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.

Share:
12,753

Related videos on Youtube

Marat
Author by

Marat

Updated on June 13, 2022

Comments

  • Marat
    Marat 3 months

    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?

    • adeneo
      adeneo over 9 years
      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
    ATOzTOA over 9 years
    No jquery specified by OP.
  • ATOzTOA
    ATOzTOA over 9 years
    Right, but it is not recommended. See stackoverflow.com/questions/11503534/…
  • Marat
    Marat over 9 years
    ok, I got it. But how I can get elements which belong to class 'item' and not class 'one'?
  • nice ass
    nice ass over 9 years
    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
    nbrooks over 9 years
    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
    Mark Ormston over 9 years
    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
    nbrooks over 9 years
    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

Related