Diário de bordo #6

classList

É uma propriedade do JavaScript que funciona como uma alternativa para acessar a lista de classes CSS de um elemento.

Sintaxe

 const html = document.documentElement

 html.classList.toggle('bg-black')

Neste exemplo de sintaxe que estou utilizando funciona da seguinte forma:

1. A declaração da varíavel HTML recebe o retorno do elemento de um documento
2. Faço a chamada dessa váriavel atribuindo a ela a propriedade classList que irá ser responsável por realizar a leitura da classe CSS bg-black e o toggle que é usado para alternar entre o estado do nosso elemento HTML, inserindo nossa classe CSS como parâmetro e fazendo essa mudança em nosso documento HTML.

Observação: A classList é uma propriedade read-only, ou seja, ela apenas faz a leitura das classes CSS. Mas ela tem compatibilidade com os metodos abaixo na qual você consegue adicionar, remover ou alterar essas classes CSS:

add();
// Adiciona um ou mais tokens à lista
contains();
// Retorna verdadeiro se a lista contiver uma classe
remove();
// Remove um ou mais tokens da lista
length();
// Retorna o número de tokens na lista
replace();
// Substitui um token na lista
toggle();
// Alterna entre tokens na lista
value;
// Retorna a lista de tokens como uma string
values();
// Retorna um Iterator com os valores da lista
forEach();
// Executa uma função de retorno de chamada para cada token na lista
entries();
// Retorna um Iterator com pares chave/valor da lista
supports();
// Retorna verdadeiro se um token for um dos tokens suportados por um atributo
keys();
// Retorna um Iterator com as chaves da lista
item();
// Retorna o token em um índice especificado