Klasa i identifikacija HTML elementa

Već znamo da svaki element na stranici ima svoju oznaku. Međutim, nekad će nam biti potrebno da nekako obeležimo tačno jedan ili grupu elemenata. Ove parametre ima smisla dodeljivati samo HTML elementima unutar body odeljka.

Identifikacija

Svaki element se može jedinstveno identifikovati unutar web stranice. Za ovo koristimo parametar id. Ovaj parametar možemo dodeliti bilo kom elementu.

Ovakvu identifikaciju koristimo ako imamo tačno jedan element na stranici koji je "specijalan" i na njega (i samo njega) treba da primenimo neki CSS stil. Na ovakav element se primenjuje ID selektor.

Takođe, ovakav element u JavaScriptu možemo lako "dohvatiti" iz dokumenta. Tada možemo menjati njegov izgled, svojstva ili sadržaj. Za to se koristi metod document.getElementById().

Na stranici ne smemo imati dva elementa sa istom identifikacijom. Ako se to ipak desi, web čitač će priznati samo prvi, a svim ostalim elementima će ignorisati identifikaciju.

Klasa

Svakom elementu možemo dodeliti klasu. Klasa je praktično identifikacija koja važi za više elemenata. To je bukvalno kao da kažemo da postoji neka grupa elemenata koja ima "nešto zajedničko". Za ovo koristimo parametar class. Kao i id, ovaj parametar možemo dodeliti bilo kom elementu.

Za razliku od identifikacije, na stranici možemo imati koliko god hoćemo elemenata iste klase. Inače elementi kojima dodeljujemo istu klasu ni na koji način ne moraju biti povezani na stranici, niti uopšte moraju biti isti elementi. To znači da istu klasu na strnici mogu imati pasusi, div blokovi, linkovi, ćelije tabele...

Upotreba klase je veoma slična načinu na koji upotrebljavamo identifikaciju. Možemo definisati CSS stil pod selektorom klase i onda će taj stil biti primenjen na svaki element te klase.

Web DOM nam omogućuje da pomoću JavaScripta dohvatimo sve elemente iste klase u kolekciju. Svakom elementu onda lako pristupamo kao da je član niza. Za ovo se koristi metod document.getElementsByClassName().

Da li elementu mogu istovremeno dodeliti klasu i identifikaciju?

Prost odgovor je - da. Čak ćemo često dolaziti u situaciju da moramo to da uradimo. Klasa i identifikacija ne smetaju jedna drugoj.

Što se čiče CSS stilova, ID stil će biti "jači" od stila klase, pošto je "speciifičniji". JavaScript nema nikakve probleme - element može slobodno biti pozvan i preko identifikacije i kao član kolekcije.

Višestruke klase

Elementima možemo dodeliti i više od jedne klase. Svaku klasu navodimo u okviru istog class parametra i odvajamo ih razmakom.

Na takav element se primenjuju stilovi svih navedenih klasa, a u JavaScriptu možemo dohvatiti isti element kroz više kolekcija.

  <p class="vazno">Važan pasus.</p>

  <div id="spec">Specijalan tekst.</div>
  
  <div class="vazno" id="jedinstven">Važan tekst koji je i jedinstven.</div>
  
  <div class="vazno drugo">Neki isto tako važan tekst, ali i nešto drugo.</div>

  <p class="drugo">Neki drugi tekst.</p>