Manipular atributos del DOM

Autor: | Última modificación: 19 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

También conocido como DOM por sus siglas en inglés, el concepto de Document Object Model se basa en un árbol jerárquico de etiquetas HTML que se establecen en un orden de parentesco. Todas estas etiquetas, además de tener sus propios métodos y propiedades, se despliegan de la clase Element. En este post, te enseñaremos cómo manipular atributos del DOM usando distintas propiedades de la clase Element.

Antes de empezar

Antes de enseñarte cómo manipular atributos del DOM usando las distintas propiedades de la clase Element, vamos a definir la base con la que trabajaremos todos los ejemplos en cada propiedad. Para ejemplificar cómo funciona cada propiedad, usaremos un elemento input en nuestro archivo HTML. Este input tiene distintos atributos: un type, un value y un placeholder.

<input

type=»text»

value=»valor por defecto»

placeholder=»escribe aquí algo»

/>

Ten presente que los ejemplos que te mostraremos a continuación podrás ejecutarlos tú mismo directamente en la consola del inspector web. Así, verás como el input de tu archivo HTML se modifica de manera inmediata. Para simplificar el proceso de manipular atributos del DOM en este input, guardaremos su selección en una variable.

const inputElement = document.querySelector (‘input’)

¿Cómo manipular atributos del DOM?

La clase Element tiene muchas propiedades que nos permiten manipular atributos del DOM. A continuación, te enseñaremos cuáles son algunas de estas y cómo funcionan.

Recuerda que, como todas las etiquetas HTML del DOM son instancias de esta clase, con las siguientes propiedades puedes acceder y manipular los atributos de cualquier etiqueta HTML. Es decir, son propiedades comunes para todo el árbol del DOM.

nodo.attributes

Esta propiedad nos permite acceder a los atributos de un nodo HTML. Es decir, nos permite revisar los atributos actuales y modificarlos si así lo queremos.

inputElement.attributes

Al ejecutar esta línea de código, obtendremos un mapa que nos dice que el nodo seleccionado tiene type, value y placeholder. Además, podemos desplegar cada uno de estos atributos para conocer sus detalles en profundidad.

nodo.setAttribute («<name>», «<value>»)

Esta propiedad nos permite setear atributos nuevos en un nodo HTML. Es decir, nos permite cambiar el valor de un atributo al pasar como parámetros el nombre del atributo y, luego, su nuevo valor.

inputElement.setAttribute (‘value’, ‘valor nuevo’)

Al ejecutar esta línea de código verás que el atributo value de nuestro elemento input ahora es igual al string ‘valor nuevo’, no el string previo ‘valor por defecto’.

nodo.getAttribute («<name>») – > <value>

Con esta propiedad podemos obtener el valor actual de un atributo en un nodo o etiqueta HTML. Para ello, basta con pasar el nombre del atributo para obtener como respuesta el valor que tiene actualmente. A continuación, te mostramos un ejemplo con el atributo placeholder de nuestro inputElement.

inputElement.getAttribute (‘placeholder’)

‘escribe aquí algo’

nodo.hasAttribute («<name>») -> Boolean

Con esta propiedad, podemos comprobar si un nodo HTML determinado tiene o no un atributo específico. En este sentido, obtendremos un valor booleano como respuesta. Es decir, true o false. A continuación te mostramos un ejemplo en el que queremos comprobar si inputElement tiene el atributo disabled:

inputElement.hasAttribute (‘disabled’)

false

Ahora, si quisiéramos cambiar esta respuesta tendríamos que añadirle el atributo al elemento. Para ello, basta con igualar el atributo a un valor:

inputElement.disabled = true

Si queremos volver al estado actual con nuestro input activo, bastará con pasar este valor a false, ya sea igualándolo de nuevo o usando setAttribute.

inputElement.disabled = false

inputElement.setAttribute (‘disabled’, ‘false’)

nodo.removeAttribute («<name>»)

Con esta propiedad podemos eliminar un atributo de un nodo HTML. A continuación, te mostramos un ejemplo eliminando el atributo disabled que acabamos de crear en nuestro elemento input:

inputElement.removeAttribute (‘disabled’)

Para conocer sobre otras de las propiedades que tiene la clase Element, te invitamos a leer el artículo element en la página oficial de la Mozilla Developer Network. Además, puedes leer nuestro post sobre manipular estilos y clases CSS en nodos del DOM.

¿Cuál es el siguiente paso?

Ahora que sabes cómo manipular atributos del DOM, te invitamos a utilizar este conocimiento en proyectos completos. Te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, una formación intensiva donde aprenderás a desarrollar todo tipo de proyectos web con lenguajes de programación y herramientas variadas. ¿A qué esperas para convertirte en un experto del desarrollo web? ¡Entra para pedir más información e impulsa tu carrera laboral en pocos meses!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!