data-*-attribuuttien käyttö datasetillä JavaScriptissä
Lue ja kirjoita mukautettuja data-attribuutteja dataset-API:n avulla
data-*-attribuuttien käyttö datasetillä JavaScriptissä on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Mikä dataset-rajapinta on
Jokainen HTML-elementti tarjoaa data-*-attribuuttinsa dataset-ominaisuuden kautta — kyseessä on DOMStringMap, joka yhdistää attribuuttien nimet ja arvot ilman getAttribute()-kutsujen tarvetta.
Attribuutin muuntaminen ominaisuudeksi
data-user-id muuttuu muotoon el.dataset.userId. Attribuuttien nimien väliviivat muunnetaan dataset-ominaisuudessa camelCase-muotoon. Attribuutin data-item-count käyttö tapahtuu muodossa el.dataset.itemCount.
Arvojen lukeminen
Lukekaa data-attribuutti: const id = el.dataset.userId. Kaikki dataset-arvot ovat merkkijonoja — muuntakaa numeeriset arvot tarvittaessa Number()- tai parseInt()-funktiolla. Määrittelemättömät attribuutit palauttavat arvon undefined, eivät arvoa null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Arvojen kirjoittaminen
Asettakaa data-attribuutti dataset-ominaisuuden kautta: el.dataset.state = "active". Tämä luo tai päivittää HTML-attribuutin data-state. Attribuutin muutos näkyy DOM:ssa heti, ja MutationObserver voi tarkkailla sitä.
Arvojen poistaminen
Poistakaa data-attribuutti: delete el.dataset.userId. Vastaava data-user-id-attribuutti poistetaan elementistä. Voitte käyttää myös el.removeAttribute("data-user-id")-kutsua nimenomaiseen poistamiseen.
dataset-ominaisuuden läpikäynti
dataset on DOMStringMap — käykää se läpi for...in-silmukalla tai levittäkää se Object.entries-funktioon: Object.entries(el.dataset).forEach(([key, value]) => { ... }). Tämä on hyödyllistä, kun elementin kaikki data-attribuutit luetaan kerralla.
dataset-ominaisuuden käyttäminen komponentin tilaan
Tallentakaa kevyt komponentin tila data-attribuutteihin piilotettujen syötekenttien tai JavaScript-muuttujien sijaan. Välilehtikomponentti tallentaa aktiivisen välilehden indeksin säilön data-active-tab-attribuuttiin, josta mikä tahansa komentosarja voi lukea sen ilman jaettua muuttujaa.
Tapahtumien delegointi dataset-ominaisuuden avulla
Liittäkää luettelon säilöön yksi napsautusten kuuntelija. Lukekaa napsautuksen yhteydessä kohteena olevan elementin dataset: e.target.closest("[data-id]").dataset.id. Yksi kuuntelija käsittelee kaikki kohteet ilman jokaiselle kohteelle tehtävän sidonnan aiheuttamaa lisäkustannusta.
dataset vai mukautetut ominaisuudet
Käyttäkää dataset-ominaisuutta tietoihin, joiden on oltava luettavissa HTML:stä, kuten palvelimella muodostettuihin metatietoihin, jotka ovat CSS-valitsinten käytettävissä. Käyttäkää JavaScript-muuttujia hetkelliseen ajonaikaiseen tilaan, jonka ei tarvitse näkyä HTML:ssä. Molempien yhdistäminen lisää tarpeetonta monimutkaisuutta.
Tyyppimuunnoksia koskeva varoitus
dataset palauttaa aina merkkijonoja. el.dataset.active === true on aina epätosi — verratkaa arvoon el.dataset.active === "true" tai muuntakaa se: el.dataset.active === "true". dataset-ominaisuuteen tallennettu boolen tila edellyttää merkkijonovertailua.
dataset vai getAttribute
Molemmilla voidaan lukea data-attribuutteja. dataset on kätevämpi camelCase-muotoiseen käyttöön, kun taas getAttribute edellyttää koko attribuutin nimeä, mukaan lukien "data-"-etuliitteen. Suosikaa dataset-ominaisuutta nykyaikaisessa koodissa; käyttäkää getAttributea, kun käytte data-attribuuttien rinnalla läpi muita kuin data-attribuutteja.
Tietotarkistus
Miltä data-user-id-HTML-attribuutti näyttää JavaScriptin dataset-objektissa?
Yhteenveto
dataset-rajapinta yhdistää data-*-attribuutit camelCase-muotoisiksi JavaScript-ominaisuuksiksi, joita on helppo lukea, kirjoittaa ja poistaa. Sen avulla voidaan tallentaa komponentin tila, toteuttaa tapahtumien delegointimalleja ja siirtää tietoja palvelimelta asiakkaalle ilman piilotettuja syötekenttiä tai globaaleja muuttujia.
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
Usein kysytyt kysymykset
Onko oppitunti ”data-*-attribuuttien käyttö datasetillä JavaScriptissä” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “data-*-attribuuttien käyttö datasetillä JavaScriptissä”. 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-*-attribuuttien käyttö datasetillä JavaScriptissä”?
Lue ja kirjoita mukautettuja data-attribuutteja dataset-API:n avulla 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 2/4.
Kuinka kauan ”data-*-attribuuttien käyttö datasetillä JavaScriptissä”-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