Manual de referência HTML DOMTokenList

DOMTokenList

DOMTokenList É um grupo de tokens separados por espaços.

Pode-se acessar DOMTokenList por índice (começando em 0).

Propriedade lengthRetorna o número de tokens no DOMTokenList.

Nota:Do elemento HTML Propriedade classListRepresenta DOMTokenList.

Propriedades e métodos DOMTokenList

Nome Descrição
add() Adiciona um ou mais tokens à lista.
contains() Retorna true se a lista contiver classes.
entries() Retorna um iterador com pares de chave/valor da lista.
forEach() Executa uma função de callback para cada token na lista.
item() Retorna o token na posição especificada.
keys() Retorna um iterador com as chaves na lista.
length Retorna o número de tokens na lista.
remove() Remove um ou mais tokens da lista.
replace() Substitui o token na lista.
supports() Retorna true se o token for um dos tokens suportados pela propriedade.
toggle() Alternar entre os tokens na lista.
value Retorna a lista de tokens como uma string.
values() Retorna um iterador com os valores da lista.

Instância

Exemplo 1

Adicionar a classe "myStyle" ao elemento:

element.classList.add("myStyle");

Experimente você mesmo

Exemplo 2

Remover a classe "myStyle" do elemento:

element.classList.remove("myStyle");

Experimente você mesmo

Exemplo 3

Abrir e fechar "myStyle":

element.classList.toggle("myStyle");

Experimente você mesmo

Mais exemplos estão disponíveis na parte inferior da página.

Não é uma array

DOMTokenList não é uma array!

O DOMTokenList pode parecer uma array, mas na verdade não é.

Você pode percorrer o DOMTokenList e usar referências de índice para seus tokens.

Mas você não pode usar métodos de Array no DOMTokenList, como push(), pop() ou join().

Instância

Exemplo 1

Adicionar várias classes ao elemento:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Experimente você mesmo

Exemplo 2

Remover várias classes do elemento:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Experimente você mesmo

Exemplo 3

Obter o número de classes do elemento:

let numb = element.classList.length;

Experimente você mesmo

Exemplo 4

Obter o nome da classe do elemento "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Eu sou myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Experimente você mesmo

Exemplo 5

Obtenha a primeira classe do elemento:

let className = element.classList.item(0);

Experimente você mesmo

Exemplo 6

O elemento tem a classe "myStyle"?

let x = element.classList.contains("myStyle");

Experimente você mesmo

Exemplo 7

Se o elemento tiver a classe "myStyle", remova "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Experimente você mesmo

Exemplo 8

Alternar entre classes para criar um botão de下拉菜单:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Experimente você mesmo

Exemplo 9

Crie um navbar adesivo:

// Obtenha o navbar
const navbar = document.getElementById("navbar");
// Obtenha a posição de deslocamento do navbar
const sticky = navbar.offsetTop;
// Adicione a classe sticky ao到达滚动位置时 ao navbar
// Remova a classe ao sair da posição de rolagem
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Experimente você mesmo