HTML Academy · Oppitunti

data-*-syntaksi ja nimeämiskäytännöt

Ymmärrä kelvolliset data-*-attribuuttien nimet ja niiden tarkoitus

Oppitunti 1/413 vaihetta

data-*-syntaksi ja nimeämiskäytännöt on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Kertaus: data-*-attribuutit

Data-attribuutit (data-*) tallentavat HTML-elementteihin mukautettuja tietoja:

<div data-user-id="42" data-role="admin" data-active="true">
  User Card
</div>

Kelvolliset nimeämissäännöt

data-*-määritteen nimeämisvaatimukset:

Alkaa merkkijonolla data-
Sen jälkeen on oltava vähintään yksi merkki
Vain pieniä kirjaimia, numeroita, yhdysmerkkejä, alaviivoja, pisteitä ja kaksoispisteitä
Isoja kirjaimia ei saa käyttää (HTML-jäsennin muuttaa määritteet pieniksi kirjaimiksi)
Ei välilyöntejä

Nimeämiskäytännöt

Yhteisön nimeämiskäytännöt:

<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"

<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"

Useita data-attribuutteja

Elementillä voi olla kuinka monta data-attribuuttia tahansa:

<button
  type="button"
  data-action="delete"
  data-target-id="user-42"
  data-confirm="true"
  data-confirm-message="Delete this user permanently?"
>Delete</button>

Arvot ovat aina merkkijonoja

Data-attribuuttien arvot ovat aina merkkijonoja — jäsentäkää ne JavaScriptissä:

const el = document.querySelector('[data-user-id]');

console.log(el.dataset.userId);              // '42' (string)
console.log(typeof el.dataset.userId);       // 'string'

// Parse to number:
const id = parseInt(el.dataset.userId, 10);   // 42 (number)

// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)

// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object

JSON-tietojen tallentaminen data-*-attribuutteihin

Tallentakaa monimutkaiset tiedot JSON-merkkijonoina:

<div
  data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
  id="app"
></div>

<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme);    // 'dark'
console.log(config.pageSize); // 20
</script>

data-* vai mukautetut elementit

Milloin valita data-*, mukautetut elementit tai JavaScript-objektit:

data-* — elementtikohtaiset metatiedot, jotka näkyvät HTML:ssä ja ovat CSS:n käytettävissä
Mukautetut elementit — monimutkaiset uudelleenkäytettävät komponentit, joiden toiminta on kapseloitu
JavaScript Map/WeakMap — tiedot, joita ei tarvita HTML:ssä; suuret tai monimutkaiset tiedot

data-*-attribuuttien käyttö kehyksissä

Data-attribuuttien yleisiä käyttötapoja kehyksissä:

<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
  Toggle
</button>

<!-- Alpine.js: component data -->
<div x-data="{ open: false }">

<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">

<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>

Saavutettavuus ja data-*

Ruudunlukijat eivät ilmoita data-attribuutteja — älkää käyttäkö niitä saavutettavuustietoihin:

<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->

<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>

Suorituskykyä koskevat näkökohdat

data-*-attribuuteilla on vähäinen vaikutus suorituskykyyn:

dataset-ominaisuuden lukeminen on nopeaa (O(1))
data-*-attribuuttien runsas käyttö tuhansissa elementeissä on ongelmatonta
Suurten tietomäärien (kuvien tai suuren JSON-datan) tallentaminen data-*-attribuutteihin on tuhlailevaa
Käyttäkää WeakMap-rakennetta suurten DOM-elementteihin liitettyjen JavaScript-objektien tallentamiseen

Yhteenveto: data-*-attribuuttien parhaat käytännöt

data-*-attribuuttien parhaat käytännöt:

Käyttäkää pienaakkosia ja väliviivallisia nimiä
Arvot ovat aina merkkijonoja — jäsentäkää ne tarvittaessa
JSON-tietoja varten: JSON.stringify / JSON.parse
Käyttäkää niitä metatietoihin, joita CSS tai JavaScript tarvitsee
Ne eivät korvaa ARIA-attribuutteja
Älkää tallentako salaisuuksia (ne näkyvät DevToolsissa)

Pikatarkistus

Minkä tyyppisenä dataset palauttaa attribuuttien arvot aina?

Vastaa interaktiivisessa oppitunnissa

Kertaus: data-*-syntaksi

data-*-nimeämisen perusteet:

Muoto: data-[lowercase-name]="value"
Niihin pääsee käsiksi muodossa: element.dataset.camelCaseName
Kaikki arvot ovat merkkijonoja — jäsentäkää ne nimenomaisesti
Tallentakaa monimutkaiset tiedot JSON-muodossa
Pienaakkoset, ei suuraakkosia eikä välilyöntejä attribuutin nimessä

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”data-*-syntaksi ja nimeämiskäytännöt” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “data-*-syntaksi ja nimeämiskäytännöt”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”data-*-syntaksi ja nimeämiskäytännöt”?

Ymmärrä kelvolliset data-*-attribuuttien nimet ja niiden tarkoitus Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”data-*-syntaksi ja nimeämiskäytännöt”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

data-*-syntaksi ja nimeämiskäytännöt
data-*-attribuuttien käyttö datasetillä JavaScriptissä
data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla
Käytännön kuviot: työkaluvihjeet ja tilan seuranta

← Takaisin: HTML Academy