Para entender qué hace el método Set Attribute, primero debemos comprender qué son los atributos en HTML. Los atributos son aquellas pequeñas piezas de información que puedes añadir a las etiquetas HTML. Proporcionan detalles adicionales sobre el elemento, como su id, su class o su src en caso de una imagen, entre otros.
Entonces, ¿qué hace Set Attribute? En términos simples, te permite cambiar o añadir atributos a tus elementos HTML directamente desde tu código JavaScript. Es como tener la habilidad de cambiar el disfraz de un actor en plena obra de teatro, sin interrumpir la actuación.
¿Qué es el método Set Attribute?
El método Set Attribute incorporado en JavaScript nos permite modificar el valor de un atributo de un nodo del DOM. Este método se convierte automáticamente en nuestro compañero de equipo cuando necesitamos cambiar, por ejemplo, una imagen en nuestra web.
Supón que tenemos un sitio web dedicado a los coches de carreras y deseamos cambiar la imagen del coche de Fernando Alonso por una de Carlos Sainz. Se haría así:
let imagen = document.querySelector('img'); // Accede al nodo de imagen
imagen.setAttribute('src', 'url-de-la-imagen-de-carlos-sainz'); // Modifica el atributo 'src'¿Cómo funciona el método Set Attribute?
El método Set Attribute funciona de una manera sencilla, pero poderosa. Como puedes ver en el código anterior, este método recibe dos parámetros: el primero es el nombre del atributo que deseas cambiar y el segundo es el nuevo valor para ese atributo.
Sintaxis de los parámetros
Vamos a profundizar un poco más en la sintaxis de los parámetros. El primer parámetro es simplemente una cadena de texto que indica el nombre del atributo que deseas modificar. En nuestro ejemplo, usamos 'src' porque queríamos cambiar la URL de la imagen.
El segundo parámetro también es una cadena de texto, pero representa el nuevo valor que deseas asignar al atributo. Aquí es donde se sitúa la URL de la imagen de Carlos Sainz.
// La sintaxis se ve así
element.setAttribute(nombreDelAtributo, valorNuevo);Ahora bien, ¿qué pasa si intentas modificar un atributo que no existe? No te preocupes, el método Set Attribute tiene eso cubierto. Si el atributo no existe, el método lo crea automáticamente. Por lo tanto, si intentas establecer un atributo llamado 'invent' que no existe, Set Attribute lo añadirá a tu nodo con el valor que le asignes.
Un poco más sobre selectores
Para concluir esta guía, hablemos un poco más sobre selectores. En el ejemplo que usamos, seleccionamos la primera imagen de nuestra web usando document.querySelector('img'). Pero ¿qué sucede si tienes múltiples imágenes y solo quieres modificar una específica? Aquí es donde entran la programación orientada a objetos y los selectores de CSS.
Puedes utilizar el mismo tipo de selectores que usas en tu CSS para ser lo más concreto posible en tu elección. Si, por ejemplo, tienes una imagen dentro de un div con la clase 'title' que, a su vez, está dentro de tu body, puedes utilizar el siguiente selector:
let imagen = document.querySelector('body div.title img');Esto seleccionará solo la imagen que está dentro del div con la clase 'title', que a su vez está dentro de tu body. Así puedes acceder a elementos específicos de tu DOM de manera eficiente y sin alterar otros nodos.
Aprende más en nuestro bootcamp
Ahora conoces el poder y la flexibilidad del método Set Attribute. Por supuesto, hay mucho más por aprender en el apasionante mundo del desarrollo web. Si deseas mejorar tus habilidades y darle un giro a tu vida, no busques más y entra en el Desarrollo Web Full Stack Bootcamp de KeepCoding. Con este curso intensivo e íntegro, no solo dominarás herramientas como el método Set Attribute, sino que también adquirirás una comprensión profunda de las mejores prácticas de la industria. ¡No esperes más para especializarte en desarrollo web y pide ahora mismo más información!
