Manipular atributos del DOM

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 a manipular atributos del DOM

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.

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!