Quelles sont les différences entre une CLASS et un ID HTML

Différence lors d'une utilisation multiple ou unique

Il s'agit de première et de la plus importante des différences entre une class et un id.

Une classe peut être réutilisée sur plusieurs éléments de la page. Cela signifie que vous pouvez appliquer le même attribut class à plusieurs balises HTML.

Inversemenet un identifiant doit être unique sur une page HTML. Cela signifie que vous pouvver utiliser un seul id identique dans tout le code HTML d'une page.

Vous pouvez donc appliquer la même classe à plusieurs éléments sur une page :

<div class="ma-classe">Un premier contenu</div>
<div class="ma-classe">Un second contenu</div>

Un identifiant doit être unique sur une même page :

<div id="mon-id-1">Un premier contenu</div>
<div id="mon-id-2">Un second contenu</div>

Différence dans la manière de cibler une classe ou un identifiant en CSS

Pour cibler une classe en CSS, on utilise un point suivi du nom de la classe :

.ma-classe { propriété: valeur; }

Pour cibler un identifiant en CSS, on utilise un dièse suivi du nom de l'identifiant :

#mon-id { propriété: valeur; }

Le ciblage de la classe se fait sur toutes les classes du même nom (ma-classe), alors que celui de l'identifiant se fait sur l'identifiant spécifié (mon-id).

Si par mégarde une page contient plusieurs balises HTML avec un identifiant identique, seule la première balise identifiée est ciblée, les autres sont ignorées.

Différence dans la manière de cibler une classe ou un identifiant en JavaScript

La différence entre le ciblage d'une ou plusieurs classes et d'un identifiant, en JavaScript, réside dans les méthodes utilisées pour accéder aux balises HTML ciblées.

Voici un exemple de code HTML :

<!-- Deux éléments avec la même classe -->
<div class="ma-classe">Élément avec une classe</div>
<div class="ma-classe">Un autre élément avec la même classe</div>

<!-- Un élément avec identifiant unique -->
<div id="mon-id">Élément avec un identifiant</div>

Pour cibler le premier élément avec la classe ma-classe, il faut utiliser la méthode querySelector, elle permet de cibler le premier élément correspondant à la classe spécifiée :

var element = document.querySelector('.ma-classe');

Vous remarquerez que tout comme le ciblage CSS, c'est un point qui précède le nom de la classe.

Pour cibler tous les éléments avec une même classe, il faut utiliser la méthode querySelectorAll, elle permet de cibler tous les éléments correspondant à la classe spécifiée et cela renvoie une liste de nodes du type NodeList.

var elements = document.querySelectorAll('.ma-classe');

Vous devrez généralement utiliser une boucle for pour itérer à travers tous les éléments correspondant à la classe spécifiée.

<script>
var elements = document.querySelectorAll('.ma-classe');
for (let i = 0; i < elements.length; i++) 
{
   var element = elements[i];
   // Ations à effectuer sur chaque élément
}
</script>

Pour cibler un élément avec un identifiant, il faut utiliser la méthode getElementById, elle permet d'obtenir l'élément correspondant à l'identifiant spécifié.

var element = document.getElementById('mon-id');

Différence de priorité CSS entre une classe et un identifiant

En cas de conflit entre des styles CSS qui seraient appliqués à un même élément via une classe et un identifiant, la règle générale est que l'identifiant dispose d'une priorité plus grande.

Cela signifie que les effets de style CSS définis pour un identifiant auront tendance à prévaloir sur ceux d'une classe.

En outre l'utilisation de la propriété CSS !important supplante la notion de priorité entre une classe et un identifiant.

Différence en terme de flexibilité entre une classe et un identifiant

Les classes offrent une plus grande flexibilité car elles permettent la création de règles CSS réutilisables. À l'inverse les identifiants sont plus rigides car ils sont destinés à être uniques.

De la même manière en JavaScript les classes sont plus souvent utilisées car elles premttent de manipuler dynamiquement les éléments en ajoutant ou supprimant des classes aux balises HTML.

Par ailleurs les styles CSS définis pour une classe peuvent être hérités par plusieurs éléments, ce qui n'est pas le cas pour les identifiants.

Toutes ces distinctions soulignent les différences conceptuelles et pratiques entre les classes et les identifiants, et leur utilisation dépend des besoins de conception, de développement, d'optimisation et de maintenance du code HTML.