¿En qué consiste la diferencia entre atributos y propiedades en las etiquetas HTML?

Los atributos son pares de nombre-valor escritos directamente en la etiqueta HTML de apertura. Determinan las características iniciales o actuales del elemento, pero no siempre reflejan directamente su estado actual en el DOM.

Las propiedades son valores asociados a objetos JavaScript que representan elementos del DOM. Son dinámicas y reflejan el estado actual del elemento.

Aquí están las diferencias clave:

• Ubicación: Los atributos están en HTML, las propiedades en objetos DOM.
• Tipos de datos: Los atributos siempre son cadenas. Las propiedades pueden tener diferentes tipos de datos (cadenas, números, booleanos, objetos).
• Dinamicidad: Los atributos son estáticos después de cargar la página (aunque se pueden modificar mediante JavaScript). Las propiedades pueden cambiar dinámicamente en respuesta a la interacción del usuario o la lógica de los scripts.
• Relación: Muchos atributos tienen correspondencias directas con propiedades (por ejemplo, el atributo id y la propiedad id). Pero hay atributos sin propiedades directas (data-*) y propiedades sin atributos directos (textContent, className).

Ejemplo:

<input type="text" value="Valor inicial" readonly>

Aquí:

• type="text", value="Valor inicial" y readonly son atributos.

Después de cargar la página, las propiedades correspondientes en JavaScript serán:

// Obtenemos el elemento input
const inputElement = document.querySelector('input');

// Propiedades del elemento
console.log(inputElement.type);     // Mostrará: "text" (la propiedad corresponde al atributo)
console.log(inputElement.value);    // Mostrará: "Valor inicial" (corresponde inicialmente al atributo)
console.log(inputElement.readOnly); // Mostrará: true (la propiedad corresponde al atributo, pero en camelCase)

Si el usuario cambia el texto en el campo de entrada, la propiedad value se actualizará, pero el atributo value en HTML permanecerá igual, reflejando solo el valor inicial.

// El usuario ingresó "Nuevo valor"
// inputElement.value ahora será "Nuevo valor",
// pero inputElement.getAttribute('value') seguirá devolviendo "Valor inicial".