Comment se fait-il que tous les éléments aient des propriétés identiques, telles que la classe et l'identifiant?

Les classes (class) et les identifiants (id) sont des attributs HTML permettant de sélectionner des éléments pour la stylisation via CSS et l'interaction via JavaScript.

Classe :

• Peut être attribuée à plusieurs éléments HTML.
• Sert à regrouper des éléments ayant des caractéristiques visuelles ou comportementales communes.
• En CSS, le sélecteur de classe commence par un point (.), par exemple : .ma-classe.
• En JavaScript, les éléments par classe sont sélectionnés avec les méthodes getElementsByClassName ou querySelectorAll.

Identifiant :

• Doit être unique dans toute la page HTML.
• Sert à identifier un seul élément spécifique.
• En CSS, le sélecteur d'identifiant commence par un dièse (#), par exemple : #mon-id.
• En JavaScript, l'élément par ID est sélectionné avec la méthode getElementById.

Exemple :

  <div class="carte">
      <p>Texte de la carte 1</p>
  </div>
  <div class="carte">
      <p>Texte de la carte 2</p>
  </div>
  <button id="monBouton" class="btn">Bouton</button>

  .carte { /* Styliser tous les éléments avec la classe "carte" */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #monBouton { /* Styliser uniquement l'élément avec ID "monBouton" */
      background-color: blue;
      color: white;
  }

  .btn { /* Styles communs pour tous les boutons */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Obtenir tous les éléments avec la classe "carte"
  const cartes = document.getElementsByClassName('carte');

  // Obtenir l'élément avec ID "monBouton"
  const bouton = document.getElementById('monBouton');

  // Ajouter un gestionnaire d'événement clic au bouton
  if (bouton) {
      bouton.addEventListener('click', () => {
          alert('Bouton pressé !');
      });
  }

Les classes et les identifiants sont tous deux des attributs HTML qui sont définis directement dans le balisage. Cela permet de les utiliser pour la stylisation (via CSS) et la gestion du comportement (via JavaScript). Utiliser des classes pour des éléments similaires et des ID uniques pour des éléments individuels est une pratique standard.