Ako sa zistí, že všetky prvky majú rovnaké…

Triedy (class) a identifikátory (id) sú HTML atribúty, ktoré umožňujú výber prvkov na štýlovanie pomocou CSS a interakciu pomocou JavaScriptu.

Trieda:

Môže byť priradená viacerým HTML prvkom.
Používa sa na skupinovanie prvkov s spoločnými vizuálnymi alebo správaním vlastnosťami.
V CSS začína selektor triedy bodkou (.), napríklad: .moja-trieda.
V JavaScripte sa prvky podľa triedy vyberajú metódami getElementsByClassName alebo querySelectorAll.

Identifikátor:

Musí byť jedinečný v rámci celej HTML stránky.
Používa sa na identifikáciu konkrétneho prvku.
V CSS začína selektor identifikátora znakom hash (#), napríklad: #môj-iden.
V JavaScripte sa prvok podľa ID vyberá metódou getElementById.

Príklad:

  <div class="karta">
      <p>Text karty 1</p>
  </div>
  <div class="karta">
      <p>Text karty 2</p>
  </div>
  <button id="môjTlačidlo" class="btn">Tlačidlo</button>

  .karta { /* Štýlovanie všetkých prvkov s triedou "karta" */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #môjTlačidlo { /* Štýlovanie len prvku s ID "môjTlačidlo" */
      background-color: blue;
      color: white;
  }

  .btn { /* Všeobecné štýly pre všetky tlačidlá */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Získať všetky prvky s triedou "karta"
  const karty = document.getElementsByClassName('karta');

  // Získať prvok s ID "môjTlačidlo"
  const tlačidlo = document.getElementById('môjTlačidlo');

  // Pridať obsluhu udalosti kliknutia na tlačidlo
  if (tlačidlo) {
      tlačidlo.addEventListener('click', () => {
          alert('Tlačidlo bolo stlačené!');
      });
  }

Ako triedy, tak aj identifikátory sú HTML atribúty, ktoré sa nastavujú priamo v markup. To im umožňuje byť použité na štýlovanie (cez CSS) a riadenie správania (cez JavaScript). Použitie tried pre podobné prvky a jedinečných ID pre jednotlivé prvky je štandardná prax.

Ako sa zistí, že všetky prvky majú rovnaké vlastnosti, ako je trieda a identifikátor?