Kā noskaidrot, ka visi elementi ir vienādas īpašības…

Klases (class) un identifikatorus (id) ir HTML atribūtus, kas ļauj izvēlēties elementus stila pielietošanai ar CSS un mijiedarbībai ar JavaScript:

Klase:

var piešķirt ** vairākām ** HTML elementiem;
tiek izmantota elementu grupēšanai ar kopīgām vizuālām vai uzvedības īpašībām;
CSS selektorā klases nosaukums sākas ar punktu (.), piemēram: .my-class;
JavaScript elementus pēc klases izvēlas ar getElementsByClassName vai querySelectorAll metodēm;

Identifikators:

jābūt unikālam visā HTML lapā;
tiek izmantots, lai identificētu vienu konkrētu elementu;
CSS selektorā identifikators sākas ar hašišu (#), piemēram: #my-id;
JavaScript elementu pēc ID izvēlas ar getElementById metodi;

Piemērs:

  <div class="card">
      <p>Kartītes teksts 1</p>
  </div>
  <div class="card">
      <p>Kartītes teksts 2</p>
  </div>
  <button id="myButton" class="btn">Poga</button>

  .card { /* Stils visiem `card` klases elementiem */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #myButton { /* Stils tikai elementam ar ID `myButton` */
      background-color: blue;
      color: white;
  }

  .btn { /* Kopējie stili visiem pogām */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Saņemt visus elementus ar klasi `card`
  const cards = document.getElementsByClassName('card');

  // Saņemt elementu ar ID `myButton`
  const button = document.getElementById('myButton');

  // Pievienot klikšķa notikumu pogai
  if (button) {
      button.addEventListener('click', () => {
          alert('Poga nospiesta!');
      });
  }

Klases un identifikatori ir HTML elementu atribūti, kas tieši norādīti markupā. Tas ļauj tos izmantot stila (ar CSS) un uzvedības pārvaldībai (ar JavaScript). Klases izmanto līdzīgu elementu grupēšanai, bet unikālie ID – atsevišķiem elementiem, tas ir standarta prakse.

Kā noskaidrot, ka visi elementi ir vienādas īpašības, piemēram, klases un identifikatora?