Kāpēc ieteicams izmantot data atribūtus HTML?

HTML data-* atribūti ieteicami lietošanai pielāgotiem datiem, kuriem nav vizuālas reprezentācijas, tieši DOM elementu iekšpusē. Tas ļauj:

• Sargāt mazās datu daļas, kas saistītas ar elementu: Piemēram, produkta identifikators, elementa statuss, logrīka iestatījumi.
• Vienkārši piekļūt un manipulēt ar datiem, izmantojot JavaScript: Datus viegli var iegūt ar element.dataset un mainīt.

// Datu iegūšana
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Iegūt data-element-id atribūta vērtību

// Datu iestatīšana
myElement.dataset.status = 'active'; // Iestatīt data-status atribūta vērtību

• Izvairīties no nesemantiskām klasēm: Klasu izmantošana datu glabāšanai (piemēram, .status-active) var padarīt marķējumu mazāk lasāmu un grūtāk uzturamu.
• Uzlabot veiktspēju dažos scenārijos: Pieeja datiem caur dataset var būt ātrāka nekā virknes atribūtu parsēšana vai slēptu elementu darbs.
• Šos datus izmantot CSS selektoros:

/* Izvēlēties elementus ar noteiktu statusu */
[data-status="active"] {
  border: 1px solid green;
}

Ir svarīgi izmantot data-* atribūtus datiem, kuri nav cits piemērots HTML semantisks atribūts. Datus, kas jābūt pieejamiem meklētājiem vai citiem parseriem, vajadzētu izmantot atbilstošus semantiskus elementus un atribūtus.