HTML-ում data-ատրիբուտները ինչու են անհրաժեշտ?

Դատա-ատրիբուտները (data-*) թույլ են տալիս պահել լրացուցիչ, ոչ ստանդարտ տվյալներ HTML էլեմենտների մասին հաճախորդի կողմում՝ առանց բացահայտորեն օգտագործելու այլ ատրիբուտներ կամ մանիպուլյացիաների DOM-ստրուկտուրայի համար:

Նրանք օգտակար են՝

• Տվյալների պահպանում JavaScript-ի համար: JavaScript-ը հեշտությամբ կարող է հասանելի լինել այդ տվյալներին և օգտագործել դրանք դինամիկ վարքագծի, էլեմենտի հետ փոխազդեցության կամ տվյալների փոխանակման համար:

  <div id="user-profile" data-user-id="123" data-user-role="admin">
      Բարեւ, admin!
  </div>
  

  // Data-ատրիբուտներից տվյալների ստացում
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Հատուկ ատրիբուտների ստեղծում: Փոխարենը՝ ստեղծել սեփական ոչ ստանդարտ ատրիբուտներ (որոնք չեն համապատասխանում HTML-ի ստանդարտին), օգտագործվում են data-*, ինչը դարձնում է կոդը ավելի սեմանտիկ և վավեր:

• Ստիլիզացում: CSS-սելեկտորների միջոցով ըստ ատրիբուտների կարելի է ձևափոխել էլեմենտները data- արժեքների հիման վրա:

  <button data-status="active">Ակտիվ կոճակ</button>
  <button data-status="inactive">Ակտիվ չէ կոճակ</button>
  

  /* Ստիլիզացում data-ատրիբուտով */
  button[data-status="active"] {
      ֆոնային-գույն: կանաչ;
  }
  
  button[data-status="inactive"] {
      ֆոնային-գույն: գորշ;
  }
  

• Ֆրեյմվորկներ և գրադարաններ: Շատ ֆրեյմվորկներ և գրադարաններ օգտագործում են data-ատրիբուտները կոմպոնենտների ինիցիալիզացման, պարամետրերի փոխանցման կամ տվյալների կապակցման համար (օրինակ՝ Vue.js-ի v-bind կամ React-ի data-ատրիբուտները երրորդ կողմի գրադարանների ինտեգրացիայի համար):

• Միկրոֆորմատներ և կառուցվածքային տվյալներ: Կան դեպքերում data-ատրիբուտները կարող են օգտագործվել միկրոֆորմատների կամ տվյալների նշագրման համար, որոնք հասկանում են մեքենաները:

Ընդհանուր առմամբ, data-ատրիբուտները ապահովում են ճկուն և ստանդարտ միջոց լրացուցիչ տվյալներ պահելու համար HTML էլեմենտներում, ինչը հեշտացնում է դրանց հետ աշխատելը JavaScript և CSS-ի միջոցով։