Ինչպե՞ս է պարզվում, որ բոլոր տարրերը նույն հատկություններն ունեն, ինչպիսիք են դասը և նույնականացուցիչը։

Կլասները (class) և նույնականացուցիչները (id) HTML ատրիբուտներ են, որոնք թույլ են տալիս ընտրել տարրեր CSS-ի միջոցով ձևավորման և JavaScript-ի միջոցով փոխազդեցության համար:

Կլաս:

• կարող է վերագրել ** մի քանի ** HTML տարրերին;
• օգտագործվում է խմբավորելու համար տարրերը, որոնք ունեն ընդհանուր տեսողական կամ վարքագծային հատկանիշներ;
• CSS սելեկտորում կլասը սկսվում է կետից (.), օրինակ՝ .my-class;
• JavaScript-ում տարրերը ըստ կլասի ընտրում են getElementsByClassName կամ querySelectorAll մեթոդներով;

Նույնականացուցիչ:

• պետք է լինի հատուկ ամբողջ HTML էջում;
• օգտագործվում է միայն մեկ տարրին նույնականացնելու համար;
• CSS սելեկտորում նույնականացուցիչը սկսվում է հեշից (#), օրինակ՝ #my-id;
• JavaScript-ում տարրն ըստ ID ընտրում է getElementById մեթոդով;

Օրինակ:

  <div class="card">
      <p>Քարտի տեքստ 1</p>
  </div>
  <div class="card">
      <p>Քարտի տեքստ 2</p>
  </div>
  <button id="myButton" class="btn">Կոճակ</button>

  .card { /* Դիզայն բոլոր `card` դասի տարրերի համար */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #myButton { /* Դիզայն միայն `myButton` ID-ով տարրին */
      background-color: blue;
      color: white;
  }

  .btn { /* Ընդհանուր դիզայն բոլոր կոճակների համար */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Ստանալ բոլոր `card` դասի տարրերը
  const cards = document.getElementsByClassName('card');

  // Ստանալ `myButton` ID-ով տարր
  const button = document.getElementById('myButton');

  // Ավելացնել կլիկի իրադարձության հսկիչ
  if (button) {
      button.addEventListener('click', () => {
          alert('Կոճակը սեղմված է!');
      });
  }

Եվ կլասները, և նույնականացուցիչները HTML տարրերի ատրիբուտներ են և անմիջապես նշվում են markup-ում: Դա թույլ է տալիս օգտագործել դրանք ձևավորման (CSS-ի միջոցով) և վարքագծի կառավարում (JavaScript-ի միջոցով) համար: Կլասների օգտագործումը նման տարրերի համար և եզակի ID-ների համար՝ առանձին տարրերի համար, հանդիսանում է ստանդարտ պրակտիկա։