Manual de referencia de HTML DOMTokenList

DOMTokenList

DOMTokenList Es un grupo de tokens separados por espacios.

Se puede acceder a DOMTokenList mediante índice (comienza en 0).

Propiedad lengthDevuelve el número de tokens en DOMTokenList.

Nota:Del elemento HTML Propiedad classListRepresenta DOMTokenList.

Propiedades y métodos de DOMTokenList

Nombre Descripción
add() Añade uno o varios tokens a la lista.
contains() Devuelve true si la lista contiene clases.
entries() Devuelve un iterador con pares clave/valor de la lista.
forEach() Ejecuta una función de callback para cada token en la lista.
item() Devuelve el token en la posición especificada.
keys() Devuelve un iterador con las claves de la lista.
length Devuelve el número de tokens en la lista.
remove() Elimina uno o más tokens de la lista.
replace() Reemplaza los tokens en la lista.
supports() Devuelve true si el token es uno de los tokens soportados por la propiedad.
toggle() Cambia entre los tokens en la lista.
value Devuelve la lista de tokens como cadena.
values() Devuelve un iterador con los valores de la lista.

Ejemplo

Ejemplo 1

Agregar la clase "myStyle" al elemento:

element.classList.add("myStyle");

Pruebe usted mismo

Ejemplo 2

Eliminar la clase "myStyle" del elemento:

element.classList.remove("myStyle");

Pruebe usted mismo

Ejemplo 3

Abrir y cerrar "myStyle":

element.classList.toggle("myStyle");

Pruebe usted mismo

A continuación se proporcionan más ejemplos en la parte inferior de la página.

No es una matriz

DOMTokenList no es una matriz!

DOMTokenList puede parecer una matriz, pero no es así.

Puede recorrer DOMTokenList e usar referencias de índice para sus tokens.

Pero no puede usar métodos de Array en DOMTokenList, como push(), pop() o join().

Ejemplo

Ejemplo 1

Agregar múltiples clases a un elemento:

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

Pruebe usted mismo

Ejemplo 2

Eliminar múltiples clases de un elemento:

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

Pruebe usted mismo

Ejemplo 3

Obtener la cantidad de nombres de clase del elemento:

let numb = element.classList.length;

Pruebe usted mismo

Ejemplo 4

Obtener el nombre de la clase del elemento "myDIV":

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

Pruebe usted mismo

Ejemplo 5

Obtener la primera clase del elemento:

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

Pruebe usted mismo

Ejemplo 6

¿El elemento tiene la clase "myStyle"?

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

Pruebe usted mismo

Ejemplo 7

Eliminar "anotherClass" si el elemento tiene la clase "myStyle":

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

Pruebe usted mismo

Ejemplo 8

Cambiar entre clases para crear un botón desplegable:

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

Pruebe usted mismo

Ejemplo 9

Crear encabezado de navegación adhesivo:

// Obtener el encabezado de navegación
const navbar = document.getElementById("navbar");
// Obtener la posición de desplazamiento del encabezado de navegación
const sticky = navbar.offsetTop;
// Agregar la clase sticky al encabezado de navegación cuando se alcanza su posición de desplazamiento
// Eliminar cuando se sale de la posición de desplazamiento
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Pruebe usted mismo