El DOM o Document Object Model es un concepto basado en la idea de un árbol jerárquico compuesto de etiquetas (o nodos) HTML. Todas estas etiquetas son instancias de la clase element, lo que nos permite acceder y modificar sus datos mediante propiedades y métodos comunes. En este post, te enseñaremos cómo manipular estilos y clases CSS en nodos del DOM desde las propiedades de la clase element.
¿Cómo manipular estilos y clases CSS en nodos del DOM?
Al igual que hemos visto en nuestro post sobre manipular atributos del DOM, existen una serie de propiedades y métodos que nos permiten manipular estilos y clases CSS en nodos del DOM. Es decir, podemos seleccionar un nodo del DOM específico y acceder a sus estilos o clases para manipularlos. A continuación, te mostramos cómo funcionan estos comandos.
nodo.style
Esta propiedad de solo lectura nos permite conocer el estilo del elemento o nodo HTML seleccionado. Es decir, después de ejecutar este comando, obtendremos como respuesta la línea de estilo en el formato de declaración de CSS. Si no existen estilos dentro del elemento, como es el caso del ejemplo que manejamos en el post mencionado, obtendremos un null.
Aunque se considera que esta propiedad es solo de lectura, podemos utilizarla para añadir un estilo a un nodo HTML. Para ello, basta con igualar el método a la línea de estilo que queremos en nuestro nodo HTML. Para conocer más sobre este método, te recomendamos leer el post HTMLElement.style en la página oficial de la Mozilla Developer Network.
inputElement.style = background-color: blue
nodo.className
Esta propiedad nos permite obtener y definir el valor del atributo class del nodo determinado. Esto se utiliza principalmente cuando manejamos valores como active e inactive al referirnos a una clase. Para conocer más sobre cómo esta propiedad nos permite manipular estilos y clases CSS en nodos del DOM, te invitamos a leer el post Element.className de la MDN.
nodo.classList
La propiedad element.classlist nos permite acceder a las clases de un nodo HTML. Es decir, con él podemos añadir una clase o revisar las clases actuales del nodo. En nuestro caso, inputElement todavía no tiene ninguna clase, por lo que, si insertamos esta propiedad, obtendremos como respuesta un array vacío. A continuación, te mostramos esas líneas de código:
inputElement.classList
DOMTokenList [value: ‘ ‘]
De esta propiedad se despliegan varios comandos más que nos permiten manipular estilos y clases CSS en nodos del DOM al añadir, eliminar y comprobar clases dentro de un elemento HTML. A continuación, te explicamos cómo funciona cada una.
nodo.classList.add(<CSS name>)
Este comando nos permite añadir una clase a un nodo del DOM. A continuación, te mostramos la línea de código que sería necesaria para añadir una clase text-input en nuestro inputElement:
inputElement.classList.add (‘text-input’)
Al ejecutar la línea de código anterior, veremos el nombre de clase en nuestro elemento. Además, si ahora consultamos las clases con inputElement.classList, obtendremos de vuelta un DOMTokenList [‘text-input’, value: ‘text-input’].
nodo.classList.remove(<CSS name>)
Este comando nos permite eliminar una clase de un nodo HTML. A continuación, te mostramos la línea de código necesaria para eliminar la clase que hemos creado en el punto anterior:
inputElement.classlist.remove(‘text-input’)
nodo.classList.toggle(<CSS name>)
Este comando nos permite alternar la función. Es decir, nos permite definir una clase y, si el nodo HTML no la tiene, se la añade. Sin embargo, si el nodo HTML sí tiene la clase, se la elimina. A continuación, te mostramos la línea de código que usaríamos para añadir de nuevo la clase text-input a inputElement:
inputElement.classlist.toggle (‘text-input’)
true
Si ejecutáramos este método repetidas veces, veríamos cómo el valor que obtenemos de respuesta pasaría de true a false y de false a true infinitas veces.
nodo.classList.contains(<CSS name>)
Este comando funciona de manera muy similar al comando nodo.hasAttribute, ya que nos permite comprobar si un nodo tiene o no una clase al pasar como parámetro el nombre de clase. En este sentido, nos responde un valor booleano: true o false.
Ahora que sabes cómo manipular estilos y clases CSS en nodos del DOM, seguro que quieres seguir aprendiendo sobre este aspecto del desarrollo web para crear tus propios proyectos. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación íntegra e intensiva donde aprenderás a desarrollar todo tipo de proyectos con diversas herramientas y lenguajes de programación, como JavaScript (para front y backend), JSX, HTML y CSS.
¿Te animas a seguir aprendiendo con nosotros para destacar en el sector IT? ¡Pide ya más información y averigua cómo cambiar tu vida!
