Select and add class in javascript

Question

Cross Platform if possible, how can I select classes in Javascript (but not Jquery please -MooTools is fine though-) on code that I can't add an ID? Specifically, I want to add the class "cf" on any li below:

HTML

<div class="itemRelated">
  <ul>
<li class="even">
<li class="odd">
<li class="even">

I tried to fiddle it but something is missing:

Javascript

 var list, i;
list = document.getElementsByClassName("even, odd");
for (i = 0; i < list.length; ++i) {
    list[index].setAttribute('class', 'cf');
}

JSFiddle

ps. This question phenomenally has possible duplicates, (another one) but none of the answers makes it clear.

not exactly a particular IE version, just to support modern browsers and the best possible combination of old IE versions. I wouldn't mind if IE6 or IE7 are out of question for example, but if there's something usable, I would take it. — Yannis Dran
– Yannis Dran, Commented Jan 24, 2014 at 10:44

Community · Accepted Answer · 2020-06-20 09:12:55Z

46

Using plain javascript:

var list;
list = document.querySelectorAll("li.even, li.odd");
for (var i = 0; i < list.length; ++i) {
   list[i].classList.add('cf');
}

Demo

For older browsers you could use this:

var list = [];
var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; ++i) {
    if (elements[i].className == "even" || elements[i].className == "odd") {
        list.push(elements[i]);
    };
}
for (var i = 0; i < list.length; ++i) {
    if (list[i].className.split(' ').indexOf('cf') < 0) {
        list[i].className = list[i].className + ' cf';
    }
}

Demo

Using Mootools:

$$('.itemRelated li').addClass('cf');

Demo

or if you want to target specific by Class:

$$('li.even, li.odd').addClass('cf');

Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 23, 2014 at 21:19

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Yannis Dran Over a year ago

Thanks. Just to learn, what about if I want to add a second class just for li.odd? I tried this $$('li.even, li.odd").addClass('cf','sec'); but didn't seem to work.

Sergio Over a year ago

@YannisDran, then you can separate them with a space. Check here: jsfiddle.net/n4L5w/2

Dimitar Christoff Over a year ago

adding classes with .addClass() and space is not a great idea - works because the code does not check the arg passed but caused classList change to be rejected - see github.com/mootools/mootools-core/commit/… - see how this can have an adverse effect here: jsfiddle.net/3EyzL. addClass should not duplicate classes, adding space removes that safety.

Dimitar Christoff Over a year ago

as it stands in the current implementation, spaces will work fine - so as long as you are certain neither of the two classes are already on the element, use it. otherwise, chain two like you said. also see youtube.com/watch?v=hZJacl2VkKo - depends on the usecase and so on.

Kunj Over a year ago

Nice question Yannis! And great answer @Sergio ! Its very helpful.

|

MuffinTheMan · Accepted Answer · 2018-11-07 19:17:23Z

16

I know this is old, but is there any reason not to simply do this (besides potential browser support issues)?

document.querySelectorAll("li.even, li.odd").forEach((el) => {
    el.classList.add('cf');
});

Support: https://caniuse.com/#feat=es5

answered Nov 7, 2018 at 19:17

MuffinTheMan

1,58120 silver badges27 bronze badges

Comments

Ram · Accepted Answer · 2014-01-23 21:32:09Z

3

As others mention for selecting the elements you should use .querySelectorAll() method. DOM also provides classList API which supports adding, removing and toggling classes:

var list, i;
list = document.querySelectorAll('.even, .foo');
for (i = 0; i < list.length; i++) {
    list[i].classList.add('cf');
}

As always IE9 and bellow don't support the API, if you want to support those browsers you can use a shim, MDN has one.

answered Jan 23, 2014 at 21:32

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

veritas · Accepted Answer · 2014-01-23 21:52:10Z

Using some newer browser objects and methods.

Pure JS: Details: old fashioned way, declaring stuff at the beginging than iterating in one big loop over elements with index 'i', no big science here. One thing is using classList object which is a smart way to add/remove/check classes inside arrays.

var elements = document.querySelectorAll('.even','.odd'),
    i, length;

for(i = 0, length = elements.length; i < length; i++) {
    elements[i].classList.add('cf');
}

Pure JS - 2: Details: document.querySelectorAll returns an array-like object which can be accessed via indexes but has no Array methods. Calling slice from Array.prototype returns an array of fetched elements instantly (probably the fastest NodeList -> Array conversion). Than you can use a .forEach method on newly created array object.

Array.prototype.slice.call(document.querySelectorAll('.even','.odd'))
 .forEach(function(element) {
    element.classList.add('cf');
});

Pure JS - 3: Details: this is quite similar to v2, [].map is roughly that same as Array.prototype.map except here you declare an empty array to call the map method. It's shorter but more (ok little more) memory consuming. .map method runs a function on every element from the array and returns a new array (adding return in inside function would cause filling the returned values, here it's unused).

[].map.call(document.querySelectorAll('.even','.odd'), function(element) {
    element.classList.add('cf');
});

Pick one and use ;)

adeneo · Accepted Answer · 2014-01-23 21:20:15Z

2

querySelectorAll is supported in IE8, getElementsByClassName is not, which does not get two classes at the same time either. None of them work in iE7, but who cares.

Then it's just a matter of iterating and adding to the className property.

var list = document.querySelectorAll(".even, .odd");
for (var i = list.length; i--;) {
    list[i].className = list[i].className + ' cf';
}

FIDDLE

answered Jan 23, 2014 at 21:20

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Satish Chandra Gupta · Accepted Answer · 2023-10-07 01:07:24Z

1

If you want to select elements with different classes all together then the best choice is querySelectorAll.

querySelectorAll uses CSS selectors to select elements. As we add the same CSS properties to different elements by separating them by a comma in the same way we can select those elements using this.

.even, .odd {
    font-weight: bold;
}

Both elements with class 'even' and 'odd' get bold.

let list = document.querySelectorAll('.even, .odd');

Now, both the elements are selected.

+Point: you should use classList.add() method to add class.

Here is the complete code for you.

let list = document.querySelectorAll('.even, .odd');

for (i = 0; i < list.length; ++i) {
    list[i].classList.add('cf');
}

edited Oct 7, 2023 at 1:07

answered Sep 5, 2021 at 2:54

Satish Chandra Gupta

3,4311 gold badge25 silver badges24 bronze badges

1 Comment

gotiredofcoding Over a year ago

list.classList.add('cf'); will never work ..

Collectives™ on Stack Overflow

Select and add class in javascript

6 Answers 6

Using plain javascript:

Demo

Demo

Using Mootools:

Demo

Demo

7 Comments

Comments

Comments

Comments

Comments

If you want to select elements with different classes all together then the best choice is querySelectorAll.

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Using plain javascript:

Using Mootools:

7 Comments

Comments

Comments

Comments

Comments

If you want to select elements with different classes all together then the best choice is querySelectorAll.

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related