El Document Object Model, también conocido como DOM, es un concepto que nos permite acceder y modificar los elementos de un documento HTML desde nuestro código JavaScript. En este post, te enseñaremos qué es y cómo funciona la propiedad classList de JavaScript, ideal para manipular las clases de un nodo del DOM.
¿Qué es la propiedad classList de JavaScript?
La propiedad classList de JavaScript es una propiedad del objeto Element que nos permite acceder y manipular los datos de nodos HTML en el DOM. Esta propiedad en particular nos devuelve un listado de los valores del atributo class de un elemento (DOMTokenList). En este sentido es una propiedad de solo lectura.
Entonces, para acceder a este listado de clases bastará con usar uno de los métodos para seleccionar nodos del DOM e insertar la propiedad justo después. A continuación, te mostramos cómo usamos el método de selección querySelector para acceder a las clases de un elemento HTML article:
document.querySelector (“article”).classList
Al insertar esta línea de código, obtendremos como respuesta un DOMTokenList como el siguiente:
DOMTokenList [‘main-page-content’, value: ‘main-page-content’]
Aunque esta propiedad es de solo lectura, su API tiene distintos métodos que nos permiten interactuar con el listado de valores de class. Con los métodos classList.remove, classList.add, classList.replace y classList.toggle, podemos eliminar y añadir clases a este listado. A continuación, te enseñamos exactamente cómo funcionan estos métodos.
Si quieres aprender más sobre esta propiedad, te invitamos a leer el artículo Element.classList en la página oficial de la Mozilla Developer Network.
¿Cómo funciona la propiedad classList de JavaScript?
Como te comentábamos antes, la propiedad classList de JavaScript nos permite modificar los elementos del listado del DOMTokenList usando los métodos add ( ), remove ( ), replace ( ) y toggle ( ). A continuación, te explicamos exactamente qué hace cada uno de estos métodos:
- add ( ): este método añade una clase al elemento del DOM seleccionado. Es importante notar que el método omitirá las clases que ya se encuentren presentes dentro del elemento.
- remove ( ): este método elimina la clase especificada como parámetro de la lista de clases del elemento seleccionado.
- replace ( ): este método nos permite reemplazar una clase por otra. Para ello, recibe dos parámetros: el primero es el nombre de clase antiguo y el segundo, el nombre de clase que queremos que lo reemplace.
- toggle ( ): este método nos permite alternar entre las funciones añadir y eliminar clases de un elemento. Es decir ç, cuando el nombre de clase ya existe, el método toggle se encargará de eliminarlo. Por el contrario, si el nombre de clase no existe dentro del elemento, el método lo añadirá.
Ahora que te hemos enseñado qué es y cómo funciona la propiedad classList de JavaScript, te pondremos un ejemplo sobre su uso.
Un ejemplo de la propiedad classList de JavaScript
Supongamos que queremos hacer que un elemento desaparezca de nuestra interfaz sin eliminar el elemento por completo (como sucedería con el método remove de JavaScript). Entonces, desde su CSS creamos la siguiente clase para hacer que su display no aparezca:
.loader .hidden {
display:none
}
Esta clase .hidden nos permite hacer que el elemento .loader se oculte sin eliminarlo del DOM. Entonces, para hacer que desaparezca después de ser introducido en la interfaz, deberemos añadirle esta clase. Para ello, podemos guardar la selección del elemento dentro de una variable de la siguiente manera:
const loader = document.querySelector (“.loader”);
Ahora que tenemos esta variable loader, podemos añadir la clase hidden en la línea de código en la que queramos que desaparezca nuestro elemento seleccionado. Para ello, escribimos lo siguiente:
loader.classList.add (“hidden”);
Con la línea de código anterior, hemos hecho que nuestro elemento desaparezca de la interfaz sin eliminarlo del DOM. Para revisar esta dinámica, puedes dirigirte al inspector web y ver que el elemento sigue dentro del árbol HTML, pero ahora tiene la clase hidden. Si eliminamos esta clase, el elemento volverá a aparecer.
Si tienes dudas sobre esta herramienta te recomendamos nuestro post sobre cómo entender el DOM desde el inspector.
Como puedes ver, la propiedad classList de JavaScript nos permite conectar comportamientos de CSS con la lógica de JavaScript. Sin embargo, su uso frente a otros métodos para acceder y modificar los elementos del DOM dependerá de las necesidades particulares del proyecto.
¿Quieres seguir aprendiendo?
Tras leer este post, sabes exactamente qué es y cómo funciona la propiedad classList de JavaScript. Sin embargo, ¡todavía queda mucho por aprender sobre este lenguaje de programación! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a dominar este y otros lenguajes de programación para la web como HTML, CSS y JSX. ¿Quieres seguir aprendiendo con nosotros? ¡Matricúlate ya y conviértete en todo un profesional!
