Тафовутҳои байни синфҳо ва идентификаторҳо (ID) чӣ гунаанд?

Селекторҳои class ва id барои интихоби элементҳо дар HTML ва татбиқ кардани услубҳо ё скриптҳо ба онҳо истифода мешаванд.

Тафовутҳои асосӣ:

• Уникатнокӣ:
  • id бояд дар тамоми саҳифаи HTML ягона бошад. Ҳар як элемент метавонад танҳо як id дошта бошад, ва дар саҳифа набояд ду элемент бо id якхела бошанд.
  • class метавонад дар як саҳифа такроршаванда истифода шавад. Баъзе элементҳо метавонанд class якхела дошта бошанд, ва як элемент метавонад чандин класи дошта бошад.
• Тафовут дар махсусият:
  • id дорои махсусияти баландтар (вазн) дар истифодаи услубҳо нисбат ба class. Услубе, ки тавассути id муайян шудааст, афзалият дорад бар услуби, ки тавассути class ё теги муайян шудааст, агар қоидаҳои бештар махсусиятӣ набошанд.
  • class дорои махсусияти пасттар аз id, аммо баландтар аз селекторҳои таг.
• Истифода дар JavaScript:
  • id одатан барои гирифтани элементи ягона аз DOM бо истифодаи document.getElementById() истифода мешавад, ки роҳи зудтар ба элементи дастрасӣ мебошад.
  • class одатан барои интихоби гурӯҳи элементҳо бо истифодаи document.getElementsByClassName() ё document.querySelectorAll() истифода мешавад.

Масал:

HTML:

<div id="unique-element" class="styled-box">
  Элементи ягона
</div>
<div class="styled-box">
  Гурӯҳи аввал
</div>
<div class="styled-box highlight">
  Гурӯҳи дуввум (бо класи иловагӣ)
</div>

CSS:

#unique-element {
  /* Услуб барои элементи ягона бо афзалияти баланд */
  color: red;
}

.styled-box {
  /* Услуб барои гурӯҳи элементҳо */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Услуби иловагӣ барои баъзе элементҳо */
  background-color: yellow;
}

Таблиғи муқоиса:

Хусусият	ID (Шенасоии)	Class (Клас)
Уникатнокӣ	Дар саҳифа ягона аст	Мумкин аст такроршаванда бошад
Истифода	Як элемент метавонад танҳо як ID дошта бошад	Як элемент метавонад чандин класи дошта бошад
Масъулият	Баландӣ	Миёна
Истифода дар JS	getElementById()	getElementsByClassName(), querySelectorAll()
Мақсад	Шенасоии элементи ягона	Гурӯҳбандии элементҳо бо хусусиятҳои умумӣ

Истифодаи дурустии id ва class барои ташкилоти коди, нигоҳдории тозагии услубҳо ва коркарди самараноки скриптҳо муҳим аст. id бояд бо эҳтиёт истифода шавад барои элементҳои воқеан ягона, ва class барои услубҳое, ки метавонанд ба чандин элементҳо татбиқ шаванд ё барои гурӯҳбандии элементҳо бо рафтори монанд.