# classList

### Introduction to JavaScript `classList` property

The `classList` is a read-only property of an element that returns a live collection of CSS classes:

```javascript
const classes = element.classList;Code language: JavaScript (javascript)
```

The `classList` is a `DOMTokenList` object that represents the contents of the element’s class attribute.

Even though the `classList` is read-only, but you can manipulate the classes it contains using various methods.

### JavaScript `classList` examples

Let’s take some examples of manipulating CSS classes of the element via the `classList`‘s interface.

#### 1) Get the CSS classes of an element

Suppose that you have a `div` element with two classes: `main` and `red`.

```xml
<div id="content" class="main red">JavaScript classList</div>   
Code language: HTML, XML (xml)
```

The following code displays the class list of the `div` element in the Console window:

```javascript
let div = document.querySelector('#content');
for (let cssClass of div.classList) {
    console.log(cssClass);
}Code language: JavaScript (javascript)
```

Output:

```
main
red
```

How it works:

* First, select the `div` element with the id `content` using the `querySelector()` method.
* Then, iterate over the elements of the `classList` and show the classes in the Console window.

#### 2) Add one or more classes to the class list of an element

To add one or more CSS classes to the class list of an element, you use the `add()` method of the `classList`.

For example, the following code adds the `info` class to the class list of the `div` element with the id `content`:

```javascript
let div = document.querySelector('#content');
div.classList.add('info');
Code language: JavaScript (javascript)
```

The following example adds multiple CSS classes to the class list of an element:

```javascript
let div = document.querySelector('#content');
div.classList.add('info','visible','block');
Code language: JavaScript (javascript)
```

#### 3) Remove element’s classes

To remove a CSS class from the class list of an element, you use the `remove()` method:

```javascript
let div = document.querySelector('#content');
div.classList.remove('visible');Code language: JavaScript (javascript)
```

Like the `add()` method, you can remove multiple classes once:

```javascript
let div = document.querySelector('#content');
div.classList.remove('block','red');Code language: JavaScript (javascript)
```

#### 4) Replace a class of an element

To replace an existing CSS class with a new one, you use the `replace()` method:

```javascript
let div = document.querySelector('#content');
div.classList.replace('info','warning');Code language: JavaScript (javascript)
```

#### 5) Check if an element has a specified class

To check if the element has a specified class, you use the `contains()` method:

```javascript
let div = document.querySelector('#content');
div.classList.contains('warning'); // trueCode language: JavaScript (javascript)
```

The `contains()` method returns `true` if the `classList` contains a specified class; otherwise `false`.

#### 6) Toggle a class

If the class list of an element contains a specified class name, the toggle() method removes it. If the class list doesn’t contain the class name, the toggle() method adds it to the class list.

The following example uses the `toggle()` method to toggle the `visible` class of an element with the id `content`:

```javascript
let div = document.querySelector('#content');
div.classList.toggle('visible');Code language: JavaScript (javascript)
```

#### Summary

* The element’s `classList` property returns the live collection of CSS classes of the element.
* Use `add()` and `remove()` to add CSS classes to and remove CSS classes from the class list of an element.
* Use `replace()` method to replace an existing class with a new one.
* Use `contains()` method to check if the class list of an element contains a specified class.
* Use the `toggle()` method to toggle a class.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://edrus.gitbook.io/mt-it/2nd-month/week-6/dom-document-object-model/manipulating-elements-styles/classlist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.