DOMTokenList : Object

An object containing a list of strings. Used in Element.classList and HTMLIFrameElement.sandbox.

Instance Indexers

this[index : Number] : String

Retrieves the token at index. You can also use the item() method.

Example:

<span id='foo' class='bar baz'>foo</span>
<script>
  var foo = document.getElementById('foo');
  for (var i = 0; i < foo.classList.length; i++) {
    console.log(foo.classList[i]);
  }
</script>

Run

Results:

Instance Properties

length : Number readonly

The number of tokens in this.

Example:

<span id='foo' class='bar baz'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.classList.length);
</script>

Run

Results:

Spec

value : String

A string value of the token list. See also className.

Example:

<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo'>foo</span>
<script>
  var foo = document.getElementById('foo');
  foo.classList.value = 'bar baz';
</script>

Run

Results:

Spec

Instance Methods

add(token : String) : undefined

Adds token to this.

Example:

<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='bar'>foo</span>
<button onclick='addClass()'>Add Class</button>
<script>
  var addClass = function() {
    var foo = document.getElementById('foo');
    foo.classList.add('baz');
  };
</script>

Run

Results:

Spec

contains(token : String) : Boolean

Returns true if token is in this and false otherwise.

Example:

<span id='foo' class='bar'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.classList.contains('bar'));
  console.log(foo.classList.contains('baz'));
</script>

Run

Results:

Spec

item(index : Number) : String

Same as this[index].

Spec

remove(token : String) : undefined

Removes token from this.

Example:

<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='bar baz'>foo</span>
<button onclick='removeClass()'>Remove Class</button>
<script>
  var removeClass = function() {
    var foo = document.getElementById('foo');
    foo.classList.remove('baz');
  };
</script>

Run

Results:

Spec

replace(oldToken : String, newToken : String) : Boolean

If oldToken is present in this, removes oldToken, adds newToken, and returns true. Otherwise, makes no changes and returns false.

Example:

<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
  .not-applied { font-size: 2em; }
</style>
<span id='foo' class='bar'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.classList.replace('bar', 'baz'));
  console.log(foo.classList.replace('bar', 'not-applied'));
</script>

Run

Results:

Spec

toggle(token : String, [value : Boolean]) : Boolean

If value is not specified, removes token from the list if was in this or adds token to the list if it was not in this. If value is true, token is added to this if not already there. If value is false, token is removed from this.

Example:

<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='bar baz'>foo</span>
<button onclick='toggleClass()'>Toggle Class</button>
<script>
  var toggleClass = function() {
    var foo = document.getElementById('foo');
    foo.classList.toggle('baz');
  };
</script>

Run

Results:

Spec

home license contribute feedback toggle light/dark mode