Editing a HTML class attribute list using JavaScript

Last updated: September 27, 2022.

The style and appearance of a HTML element can be manipulated in JavaScript by editing the names appearing in its class attribute list. By doing so, CSS classes are applied/disapplied to elements.

The names in elements’ class list attribute also help to group elements by type, so that they can be selected together using getElementsByClassName('class') and querySelectorAll('.class').

Learning how to set and edit class lists is therefore an important aspect of mastering DOM manipulation with JavaScript.

In this post, we cover how to write a new class list, as well as how to add, remove, toggle and replace individual entries.

Setting a class list

Longhand: using setAttribute()

Like any other attribute on a HTML element, you can set new contents for it using the setAttribute() method. In the first argument position, enter the name of the attribute to set (e.g. 'class'). And in the second position, the new value for that attribute.

/* Longhand technique for setting a class list */

const newsItem = document.createElement('article');

newsItem.setAttribute('class', 'news-item featured new highlighted');

newsItem.getAttribute('class'); // news-item featured new highlighted

As you can see in this example, the getAttribute() can be used to check the value of an attribute. In this case, it shows that the class list of newsItem has been successfully set using setAttribute().

Shorthand: using classList

The class list attribute is considered to be a special type of attribute in JavaScript, so there is a shorthand for accessing it: classList.

Assigning a value to this property sets a new value for a class list.

And its current value can be accessed by querying it with dot notation.

/* Shorthand for setting a class list */

const newsItem = document.createElement('article');

newsItem.classList = 'news-item featured new highlighted';

newsItem.classList; // { "0": "news-item", "1": "featured", "2": "new", "3": "highlighted" }

newsItem.classList[1] // "featured"
newsItem.classList[3] // "highlighted"

Notice that querying the value of classList returns an object (of type DOMTokenList). Since the keys of each property are numbered, you can access the value of names in the class list by position.

Adding, removing, toggling and replacing names

For a more nuanced approach than setting the entire value of a class list, you can use the .add(), .remove() and .toggle() method available on the classList property of an element.

For the following examples, we will continue with the class list we created earlier:

const newsItem = document.createElement('article');

newsItem.classList = 'news-item featured new highlighted';

Adding

To add a name to the list, use classList.add('name'):

/* Adding a name to a class list */

newsItem.classList.add('world-news')

newsItem.classList; // { "0": "news-item", "1": "featured", "2": "highlighted", "3": "new", "4": "world-news" }

Multiple names can be added to a list simultaneously in a comma-separated list. For example, the following would add world-news and premium to the list: newsItem.classList.add('world-news', 'premium').

Removing

A name can be removed from the list with classList.remove('name'):

/* Removing a name from a class list */

newsItem.classList.remove('featured');

newsItem.classList; // { "0": "news-item", "1": "highlighted", "2": "new"}

More than one item can be removed at a time. For example, the following would remove featured and new from the list: newsItem.classList.add('featured', 'new').

Toggling

The toggle() method will remove a class list name that already exists and add a class name to a list if it doesn’t exist.

/* Toggling a name on a class list */

newsItem.classList.toggle('highlighted');

newsItem.classList; // { "0": "news-item", "1": "featured", "2": "new" }

newsItem.classList.toggle('highlighted');

newsItem.classList; // { "0": "news-item", "1": "featured", "2": "new", "3": "highlighted" }

Note that you can only toggle one name at a time using the toggle() method.

Replacing

To replace a name in a class list, use classList.replace('existing-name', 'new-name'):

/* Replacing a name on a class list */

newsItem.classList.replace('news-item', 'sports-item');

newsItem.classList; // { "0": "sports-item", "1": "featured", "2": "new", "3": "highlighted" }

The replace() method can replace only one name per use.

Summary

Learning to manipulate class lists effectively in an important aspect of mastering DOM manipulation in JavaScript.

Here is a summary of the techniques covered:

• The value of a class list can be set by:
  • Using setAttribute('class', 'the-list')
  • Setting the value of classList
• For more nuanced editing, methods are available on classList to:
  • Add a name: add('name-to-add')
  • Remove a name: remove('name-to-remove')
  • Toggle a name: toggle('name-to-toggle')
  • Replace a name: replace('existing-name', 'new-name')

Related links

• MDN Web Docs: Element.classList
• MDN Web Docs: DOMTokenList

---