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?

The last one is'nt a similar class, it's the exact same class, ***and*** the class `one`, space seperation means two different classes ! — adeneo, Feb 24 '13 at 18:42

nice ass · Answer 1 · 2013-02-24T18:49:24.913

5

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')){
  ...
}

edited Feb 24 '13 at 18:49

answered Feb 24 '13 at 18:43

nice ass

16,471
7
50
89

No jquery specified by OP. – ATOzTOA Feb 24 '13 at 18:45
Right, but it is not recommended. See http://stackoverflow.com/questions/11503534/jquery-vs-document-queryselectorall – ATOzTOA Feb 24 '13 at 18:48
3

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 – nice ass Feb 24 '13 at 18:54

ATOzTOA · Accepted Answer · 2013-02-24T19:23:18.107

5

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

edited Feb 24 '13 at 19:23

answered Feb 24 '13 at 18:44

ATOzTOA

34,814
22
96
117

ok, I got it. But how I can get elements which belong to class 'item' and not class 'one'? – Marat Feb 24 '13 at 18:51
(e[i].className!="item one") works, but not your condition. I think because in my case first class is 'item ' – Marat Feb 24 '13 at 19:11
@Marat Can you share your HTML? – ATOzTOA Feb 24 '13 at 19:20

fxlemire · Answer 3 · 2017-11-09T16:45:27.187

2

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.

edited Nov 09 '17 at 16:45

answered Nov 09 '17 at 15:08

fxlemire

874
9
21

score 1 · Answer 4 · answered Feb 24 '13 at 18:53

1

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

answered Feb 24 '13 at 18:53

Mark Ormston

1,836
9
13

if the className is specified as `` 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 – nbrooks Feb 24 '13 at 19:01
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... – Mark Ormston Feb 24 '13 at 19:06
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 – nbrooks Feb 24 '13 at 19:10

score 1 · Answer 5 · answered Feb 24 '13 at 18:54

You can use Array.filter to filter the matched set to be only those with class test:

var elems = Array.filter( document.getElementsByClassName('test'), function(el){
    return !!el.className.match(/\s*test\s*/);
});

Or only those with test but not one:

var elems = Array.filter( document.getElementsByClassName('test'), function(el){
    return el.className.indexOf('one') < 0;
});

(Array.filter may work differently depending on your browser, and is not available in older browsers.) For best browser compatibility, jQuery would be excellent for this: $('.test:not(.one)')

document.getElementsByClassName exact match to class

5 Answers5