Quelle est la différence entre les attributs et les…

Les attributs sont des paires nom-valeur écrites directement dans la balise HTML d'ouverture. Ils définissent les caractéristiques initiales ou actuelles de l'élément, mais ne reflètent pas toujours directement son état actuel dans le DOM.

Les propriétés sont des valeurs associées aux objets JavaScript représentant les éléments DOM. Elles sont dynamiques et reflètent l'état actuel de l'élément.

Voici les différences clés :

Emplacement : Les attributs se trouvent dans le HTML, les propriétés dans les objets DOM.
Types de données : Les attributs sont toujours des chaînes. Les propriétés peuvent avoir différents types de données (chaînes, nombres, booléens, objets).
Dynamisme : Les attributs sont statiques après le chargement de la page (bien qu'ils puissent être modifiés via JavaScript). Les propriétés peuvent changer dynamiquement en réponse à l'interaction de l'utilisateur ou à la logique des scripts.
Relation : Beaucoup d'attributs ont des correspondances directes avec des propriétés (par exemple, l'attribut id et la propriété id). Mais il existe des attributs sans propriétés directes (data-*) et des propriétés sans attributs directs (textContent, className).

Exemple :

<input type="text" value="Valeur initiale" readonly>

Ici :

type="text", value="Valeur initiale" et readonly sont des attributs.

Après le chargement de la page, les propriétés correspondantes en JavaScript seront :

// Obtenir l'élément input
const inputElement = document.querySelector('input');

// Propriétés de l'élément
console.log(inputElement.type);     // Affichera : "text" (la propriété correspond à l'attribut)
console.log(inputElement.value);    // Affichera : "Valeur initiale" (correspond initialement à l'attribut)
console.log(inputElement.readOnly); // Affichera : true (la propriété correspond à l'attribut, mais en camelCase)

Si l'utilisateur modifie le texte dans le champ de saisie, la propriété value sera mise à jour, mais l'attribut value dans le HTML restera inchangé, ne reflétant que la valeur initiale.

// L'utilisateur a saisi "Nouvelle valeur"
// inputElement.value sera maintenant "Nouvelle valeur",
// mais inputElement.getAttribute('value') renverra toujours "Valeur initiale".

Quelle est la différence entre les attributs et les propriétés dans les balises HTML?