Class List (classList) Property - JavaScript DOM Tutorial For Beginners

The 'Class List' (HTMLElement.classList property) allows you to powerfully manipulate the classes attached to an HTML Element. You can use it to add, remove, toggle and even replace classes on an element.
In this video we look at a visual example (through the help of CSS) as to how exactly you can use this functionality.
For your reference:
developer.mozilla.org/en-US/d...
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[@googleaccount7252]

2 years later and you're still helping people. Thank you very much.

[@talksister4496]

Thank you. This was nicely explained; not rushed or skimmed over. You're a good teacher. Thanks again.

[@dcode-software]

Glad it was helpful!

[@reinaogo7161]

your explanation is just amazing!!!!after reading mutiple pages finally understood it. PLEASE KEEP THE HARD WORK!!

[@mauroraviolo2935]

"Yeah mate" is exactly what came to my mind after watching this video. Thank you very much.

[@jesseemana9598]

just had a 'aha' moment going through this vid, saving the entire playlist now🙌🏽🙌🏽

[@johnkevin1030]

5 years later and this content is still so valuable! Thank you!

[@shannonstumpf1861]

This was an amazing, informative, concise, easy to follow, useful, helpful video! Thank you thank you thank you

[@cutipets8706]

great job ! ... I really enjoy the way that you explain this topic

[@lologachupin9207]

Cristal clear Mate. Thanks!

[@brijeshprasaddas249]

A big salute to you sir, Very nicely explained

[@mohamedkaba23]

Thanks for clarifying toggle!

[@narahiromichi8277]

Thank you. It helps me a lot.

[@nachosanchezgallino5668]

Amazing explanation, thank you very much

[@michealleblanc6461]

Thanks for the clear explanation!!

[@36_parthshrimali84]

thank you very much, I got it finally......

[@kenkinyua7036]

that was awesome...you've saved me

[@shawnbeans7389]

wow Dom is teaching us DOM.

[@klaasjanssen644]

thx for this video, was very helpful

[@tijanisylla1348]

Great job !

[@sparkscomputerprogramming]

Well explained thank you so much

[@ihsanullahmahboobi2460]

man your dear you made it so simple.. Please upload more videos about JS

[@abirmahmud2764]

Thank you so much! Great help!

[@jotaroisdarius1918]

Quick and very helpful, thank u =)

[@lenaaoi4312]

omg your explain so well, thank you

[@roshanmayer]

thanks for this simple and clear tutorial

[@dcode-software]

You're welcome!

[@staffordnelson9053]

This a wonderful explainantion. Thank you!

[@dcode-software]

You're welcome!

[@tacva2607]

Excellent

[@sodiumsulfur2779]

You have every answer for all of my questions. Thank you. Wish you luck

[@dcode-software]

No worries thank you!

[@sodiumsulfur2779]

@@dcode-software Please could you tell me how to copy a list to clipboard but, not an input text field. I am struggling to find it from the morning ....

[@ELQUETUDROMEROARMENTA]

ty bro you are very good

[@alvirarahman1559]

Thanks so much, mate.

[@dcode-software]

Glad this could help you :)

[@sorubro2193]

This was useful, thanks

[@raanajavidan2435]

it was amazing thank you

[@bhushangawali81]

nicely explained :) Thank you!

[@dcode-software]

No worries mate!!

[@dianasicevaia4840]

Could you give a tip on how to add same class to multiple elements? I mean, for instance, I have a set of images each covered in links (tags ). Each link has a href with an anchor (ex: "href=#item01") to the hidden description card (ex: with "id=item01"). I have created a class .item_open that makes the description card visible on click. How do I get the attribute 'href' from all the tags (or from all with class .item-link) so that the class .item_open could be added to the particular description card with an id corresponding to the anchor in href of a picture in tag ? I cannot add class .item_open to the class in the description cards because the set of links is an array. In jQuery we could do that with addClass, but it does not work the same way in vanilla JS with classList.add I hope I have described the problem clearly, haha. Would really appreciate any suggestions

[@vladimirtimofte6828]

Great explanation!

[@dcode-software]

Glad it was helpful!

[@IncolasCopperfield]

thanks, super clear!

[@dcode-software]

No problem and thank you!

[@Toni-nw1dk]

Thank you very much dude!

[@dcode-software]

Welcome!

[@manuel3537]

Very powerful.

[@VictorSantos-yb8ir]

Thank you very much

[@orshalmayev7077]

Thank you!

[@khaledbenshible2657]

thank you very very much

[@MZ-yx8eg]

Amazing=)

[@GG01011]

well done,, but can you please explain: how to add or remove multiple classes using spread syntax. because when I read it from MDN I didn't understand it.

[@Carre4beta]

Thank you kindl. Helped

[@dcode-software]

Yeah no worries mate!

[@lenhu7089]

Thank you ❤️❤️

[@sacrajah]

Thank you

[@josmarybermudez]

Thank you so much for the video!! PD: i love your accent, where are you from?

[@sayedhasancp]

nice. thank you...............

[@dcode-software]

Anytime mate

[@Anweekey]

u save me. Ty

[@dcode-software]

My pleasure, mate

[@dave_m98]

legend

[@Mega_nurgle_follower_68]

Thank u

[@selwynfernandes8802]

Very Helpful, loved it, But Please use Dark Mode! 😂😂

[@harag9]

Nice tutorial, didn't know about the classList property, but I use JQuery for altering classes with ".addClass" etc. Though it's handy to know for those that don't use a library.

[@dcode-software]

For sure, and if you want to support older browsers you can use a polyfill

[@aleksandarmedarevic999]

What if you add two classes such as color: black, color:red? Will you get text in red or black?

[@vaibhavdewangan3711]

well explained

[@dcode-software]

Thanks mate! 😁

[@keremaltunsk962]

thanks

[@ahmedboutaraa8771]

so fast and clear

[@dcode-software]

Glad it helped 😁

[@MyLatinLife]

yeah mate!

[@touze69]

im russian and even i understand you. thanks.

[@vaibhavdewangan3711]

which theme you are actullay using??

[@dcode-software]

I change my theme quote a lot but in this particular video I'm using Naturegreen Light in Atom

[@mackynikat8833]

How bwt left property

[@AmitKumar-fb6yt]

Sir.... suppose we want to target a class element and add another class to it.... shows error..sir explain why this happened?

[@dcode-software]

Please post the code and the error

[@pouvoircerveau7826]

good explanation thanks,but please ,next time try to record your videos on black theme

[@dcode-software]

Thanks, you're welcome and yes all my new videos have a dark theme where possible. I've had a lot of feedback regarding this and almost everyone likes dark themes

[@kalahari8295]

Whished I saw this earlier

[@Sarah-wr3yx]

how do you go in the browser?

[@Sarah-wr3yx]

and how do you get to the console?

[@dcode-software]

To go in the browser I click on the Chrome icon in my taskbar and do open the console I hit F12 Developer Tools and choose console

[@amitaditaya9279]

[@parzynamea4701]

yeah mate got me dead

[@TheJoe01]

I want to like, but bad vibes being the 666th like

[@_.sunnyraj._]

Hmm ok

[@user-pg5xz3lq5i]

Thank you very much

[@ryeakay381]

great job ! ... I really enjoy the way that you explain this topic

[@dcode-software]

Thanks mate!

[@androidgamers6276]

thanks