Tüm öğelerin sınıf ve kimlik gibi aynı özelliklere…

Sınıflar (class) ve kimlikler (id), CSS ile stil verme ve JavaScript ile etkileşim kurma amacıyla öğeleri seçmeye olanak tanıyan HTML öznitelikleridir.

Sınıf:

Birden fazla HTML öğesine atanabilir.
Ortak görsel veya davranış özelliklerine sahip öğeleri gruplamak için kullanılır.
CSS'te sınıf seçici nokta (.) ile başlar, örneğin: .benim-sınıf.
JavaScript'te, sınıfa göre öğeleri getElementsByClassName veya querySelectorAll metodlarıyla seçilir.

Kimlik:

Tüm HTML sayfası içinde benzersiz olmalıdır.
Belirli bir öğeyi tanımlamak için kullanılır.
CSS'te kimlik seçici kare (#) ile başlar, örneğin: #benim-id.
JavaScript'te, ID'ye göre öğe getElementById metodu ile seçilir.

Örnek:

  <div class="kart">
      <p>Kart 1 metni</p>
  </div>
  <div class="kart">
      <p>Kart 2 metni</p>
  </div>
  <button id="benimButon" class="btn">Buton</button>

  .kart { /* Tüm "kart" sınıfı öğelerini stilize eder */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #benimButon { /* Sadece "benimButon" ID'sine sahip öğeyi stilize eder */
      background-color: blue;
      color: white;
  }

  .btn { /* Tüm butonlar için ortak stiller */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Tüm "kart" sınıfı öğelerini al
  const kartlar = document.getElementsByClassName('kart');

  // "benimButon" ID'sine sahip öğeyi al
  const buton = document.getElementById('benimButon');

  // Butona tıklama olay dinleyicisi ekle
  if (buton) {
      buton.addEventListener('click', () => {
          alert('Buton tıklandı!');
      });
  }

Hem sınıflar hem de kimlikler HTML öğelerinin öznitelikleridir ve doğrudan markup'ta ayarlanır. Bu, onları stil verme (CSS aracılığıyla) ve davranış kontrolü (JavaScript aracılığıyla) için kullanmaya olanak tanır. Benzer öğeler için sınıflar ve bireysel öğeler için benzersiz ID'ler kullanmak yaygın bir uygulamadır.

Tüm öğelerin sınıf ve kimlik gibi aynı özelliklere sahip olduğu nasıl anlaşılır?