logo

Método JavaScript setAttribute():qué es/cómo usarlo [Ejemplos]

JavaScript se creó para agregar interactividad a las páginas web. Puede interactuar con los elementos en pantalla y modificarlos, incluidos sus atributos HTML; de eso se trata setAttribute() lo hace. Así es como se usa.

¿Qué es el DOM HTML?

El HTML DOM (Document Object Model) es la interfaz que utiliza JavaScript para leer e interactuar con los elementos de la página HTML.

Es una estructura de datos que representa cada etiqueta HTML presente en la página, desde el elemento raíz  que envuelve su página hasta cada 

, 

,  y  – todo en la página está representado en el DOM, tanto el contenido como la estructura.

Elementos DOM en JavaScript

JavaScript usa el DOM para encontrar elementos en la página, para que pueda leerlos y actualizarlos. Al hacer referencia a un elemento DOM, el valor de las entradas se puede leer, el texto se puede actualizar o los elementos se pueden mover o modificar.

El estilo de cada elemento es parte del DOM, por lo que se puede cambiar cualquier propiedad CSS, incluido el color, el fondo, la posición y la orientación de los elementos.

JavaScript también puede crear elementos completamente nuevos y agregarlos a la página a través del DOM, y también eliminar elementos por completo.

Actualización de atributos de elementos DOM con setAttribute()

Los atributos son valores dentro de los elementos HTML que configuran cómo se comporta el elemento, le asignan un valor o dictan lo que hace en la página.

Una lista completa de atributos HTML estándar está disponible aquí.

También se pueden configurar atributos personalizados, que puede configurar y leer para sus propios fines.

sintaxis del método setAttribute()

setAttribute(NAME, VALUE)

Tenga en cuenta que:

  • NOMBRE es el nombre del atributo HTML que desea configurar o actualizar
  • VALUE es el valor en el que se establecerá el atributo
    • Todos los valores de VALUE se convertirán en cadena
    • Si usa un valor booleano, la presencia de un valor, sin importar cuál sea, se considerará VERDADERO, y una cadena vacía se considerará FALSO

Ejemplo del método setAttribute()

El siguiente ejemplo de código demuestra setAttribute Método JavaScript:

<input id="my-input">

<script>
    var myInput = document.getElementById("my-input");

    myInput.setAttribute("disabled", "");
    myInput.setAttribute("value", "This input has been disabled");
</script>

Primero, una entrada con id my-input está definido.

El código JavaScript luego ubica ese elemento de entrada en el DOM usando document.getElementById método para encontrarlo por su atributo id.

La entrada luego se modifica el elemento usando su setAttribute método:primero está deshabilitado, luego su valor se actualiza para que el usuario sepa que está deshabilitado.

¿Por qué actualizar elementos DOM desde Javascript?

Hay muchas razones por las que puede querer modificar los atributos HTML de los elementos en la página:

  • Mostrar y ocultar menús
  • Cambiar el color de una notificación de lectura
  • Ocultar texto que no cabe en pantalla
  • Cambio de tamaño de imágenes
  • Mover objetos en pantalla para animación
  • Agregar eventos HTML a objetos para habilitar o deshabilitar botones o cambiar su comportamiento
  • ... Y cualquier otra razón que se te ocurra, ¡sé creativo!