Sebagai manusia yang kayaknya pengen jadi frontend developer aja lah, dan sekarang lagi latihan bikin website company profile, gue jadi kepikiran tentang apa bedanya id dan class dalam HTML.

Bangsat kan ya? Baru sekarang gue bertanya akan hal ini.

Kegoblokan gue itu hanya satu tingkat di atas “kalau id cuman dipake sekali, kalau class bisa dipake berkali-kali”.

Sekarang gue tobat men, makanya gue nyari tau lebih dalem.

Maka, inilah hasil pencarian gue:

Selayang Pandang

id dan class adalah kail buat lo ngambil sebuah elemen secara spesifik untuk nantinya lo modifikasi elemen itu dengan menggunakan CSS atau Javascript.

id

Lemme talk about id first.

id itu unique

Kenapa unique? Karena setiap elemen hanya boleh punya satu id dan dalam satu halaman HTML tidak boleh ada id yang sama.

id memmiliki fungsi khusus dalam browser

Misal, lo mau ngelink ke suatu element, lo bisa gunain hash (#) di href lo, yang nantinya bakal nunjuk ke id yang lo tuju.

<a href="#article-satu">Artikel Satu</a>

<article id="article-satu">
  <p>Ini adalah artikel satu</p>
</article>

Nantinya, kalau lo ngeklik itu link “Artikel Satu”, maka browser lo bakal langsung ngarahin lo ke tag <article> yang lo udah pasangain id dengan nilai "article-satu".

class

Sekarang, mari ngomongin class.

Tidak unique

class mah gak unique. Lo bisa pake lebih dari satu class pada satu elemen HTML. Lo juga bisa ngasih class yang sama untuk lebih dari satu elemen HTML.

gak ngaruh apa-apa buat browser

Gak kayak id yang punya fungsi untuk ngelink, class mah gak ada fungsinya buat browser.

CSS doesn't give a fuck about your id and class

CSS gak peduli lo mau pake id atau class. Yang penting dia ngambil apa yang lo mau ambil. Contoh:

<style>
  #paragraf {
    color : blue;
  }
</style>

<p id="paragraf">ini paragraf satu</p>
<p id="paragraf">ini paragraf dua</p>

<!-- Semua paragraf bakal biru warna font-nya -->

Iya, semua paragraf bakal biru warna font-nya. Padahal yang lo pake itu id (harus unique kan ya?) bukan class.

Dalam CSS, id atau class gak ada perlakukan khusus. Keduanya sama aja.

Javascript gives your id and class a fuck

Tapi javascript peduli dengan id dan class yang lo pake.

Misal, dengan adanya method getElementById() dan getElementsByClassName.

Karena javascript mengharuskan hanya satu boleh ada satu id untuk satu dokumen HTML, maka getElementById() hanya akan mengambil id paling pertama yang ditemukan apabila ada nilai id yang sama. Yang lainnya akan diabaikan.

<p id="paragraf">Ini adalah paragraf pertama</p>
<p id="paragraf">Ini adalah paragraf kedua</p>

<script>
  const paragraf = document.getElementById('paragraf');

  console.log(paragraf);
  // <p id="paragraf">

  console.log(paragraf.innerHTML);
  // ini adalah paragraf pertama
</script>

Sementara, getElementsByClassName() akan mengambil seluruh elemen HTML yang memiliki kelas dengan nilai yang sama, yang akan ditampung dalam sebuah interface yang bernama HTMLCollection.

<p class="paragraf">Ini adalah paragraf pertama</p>
<p class="paragraf">Ini adalah paragraf kedua</p>

<script>
  const paragraf = document.getElementsByClassName('paragraf');

  console.log(paragraf);
  // HTMLCollection { 0: p.paragraf, 1: p.paragraf, length: 2 }

  console.log(paragraf.length);
  // 2
</script>

Begitu sodara-sodara.

id vs class Dalam HTML