document.getElementsByClassName exact match to class
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
.
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.
Related videos on Youtube
Marat
Updated on June 13, 2022Comments
-
Marat almost 2 years
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 about 11 yearsThe last one is'nt a similar class, it's the exact same class, and the class
one
, space seperation means two different classes !
-
-
ATOzTOA about 11 yearsNo jquery specified by OP.
-
ATOzTOA about 11 yearsRight, but it is not recommended. See stackoverflow.com/questions/11503534/…
-
Marat about 11 yearsok, I got it. But how I can get elements which belong to class 'item' and not class 'one'?
-
nice ass about 11 yearsThat answer details the advantages of jQuery over using
querySelectorAll
. If you start talking about compatibility, then you should know thatgetElementsByClassName
is also inconsistent across browsers. It's up to the OP to support older browsers, if (s)he wants to do so -
nbrooks about 11 yearsif 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 about 11 yearsIn 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 about 11 yearswell 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