Ta objava bo pojasnila uporabo atributov podatkov v JavaScriptu.
Kako uporabljati atribute podatkov v JavaScriptu?
V JavaScriptu je » podatke ” atributi se uporabljajo za shranjevanje dodatnih informacij, ki niso prikazane na spletni strani. Te informacije je mogoče zapisati, do njih dostopati, brati in spreminjati dinamično v skladu z zahtevami uporabnika. Ta razdelek je opravil obravnavano nalogo praktično na atributih podatkov.
Sintaksa
< podatki elementa -*= 'neka vrednost' >
V zgornji sintaksi:
- “ element ” predstavlja element HTML, v katerem je uporabljen atribut podatkov.
- “ podatki-* ” označuje več (*) atributov podatkov, ki se začnejo s predpono (data-), tj. ključno besedo podatkov, ki ji sledi vezaj.
- neka vrednost: Podaja vrednost podatkovnega atributa.
Zdaj uporabite zgornjo sintakso, da ustvarite podatkovni atribut.
Ustvarite atribute podatkov
< div id = 'myDiv' podatke - ime = 'Alvin' podatke - starost = '40' podatke - spol = 'moški' > div >Navedena enovrstična koda HTML ustvari naslednje » ime-podatka ', ' podatkovna starost ', in ' podatek-spol « znotraj elementa »div«, katerega ID je »myDiv«.
Preberimo/dostopimo do ustvarjenih atributov podatkov.
Primer 1: Branje/dostop do podatkovnega atributa z uporabo lastnosti »dataset«.
Ta primer uporablja lastnost »nabor podatkov« za branje/dostop do določenih ali vseh atributov podatkov.
Najprej si oglejte ' gumb ', ki kliče ' jsFunc() ' ko je povezan ' onclick ” dogodek se sproži ob kliku gumba:
< gumb na klik = 'jsFunc()' > Atribut podatkov o dostopu gumb >Zdaj pa nadaljujte z definicijo »jsFunc()«:
< scenarij >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konzola. dnevnik ( element. nabor podatkov ) ;
}
scenarij >
V zgornjih vrsticah kode:
- ' jsFunc() « najprej deklarira spremenljivko »elem«, ki uporabi » document.getElementById() ” za dostop do dodanega elementa div prek njegovega ID-ja “myDiv”.
- Nato uporablja ' console.log() ', ki bo uporabljal ' nabor podatkov ” za dostop do podatkovnih atributov dostopanega elementa div in njihov prikaz v spletni konzoli.
Izhod
Pritisnite F12, da odprete spletno konzolo:
Vidimo, da se ob kliku na dani gumb na konzoli prikaže ' DOMStringMap ”, ki vsebuje vse podatkovne atribute elementa div.
Dostop do posebne vrednosti
Če želi uporabnik dostopati do določenega atributa podatkov, podajte njegovo ime z lastnostjo »nabor podatkov«, kot je ta:
< scenarij >funkcija get ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konzola. dnevnik ( element. nabor podatkov . ime ) ;
}
scenarij >
Trenutno se do podatkovnih atributov »ime« dostopa z uporabo » nabor podatkov ” lastnina.
Izhod
Vidimo lahko, da konzola prikazuje samo vrednost določenih podatkovnih atributov ob kliku gumba.
Primer 2: Branje/dostop do atributa podatkov z uporabo metode »getAttribute()«.
Ta primer uporablja metodo »getAttribute()« za branje/dostop do atributov podatkov.
V tem scenariju je vključen tudi element gumba iz prvega primera:
< gumb na klik = 'jsFunc()' > Atribut podatkov o dostopu gumb >Oglejmo si funkcionalnost metode »getAttribute()«:
< scenarij >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konzola. dnevnik ( element. getAttribute ( 'ime-podatkov' ) ) ;
konzola. dnevnik ( element. getAttribute ( 'starost podatkov' ) ) ;
konzola. dnevnik ( element. getAttribute ( 'podatki-spol' ) ) ;
}
scenarij >
V zgornjem delčku kode:
- Spremenljivka »elem« uporablja » document.getElementById() « za dostop do dodanega elementa div z njegovim ID-jem »myDiv«.
- Nato je ' console.log() ' metoda uporablja ' getAttribute() « za pridobitev podane vrednosti atributa »data« pridobljenega elementa div in jo nato prikaže v spletni konzoli.
- Ista naloga se izvede za dostop do preostalih podanih atributov podatkov.
Opomba: Metoda »getAttribute()« določa podatkovni atribut s predpono »data«, ki ji sledi vezaj (-), tj. (data-), ki ni potreben pri uporabi lastnosti »dataset()«.
Izhod
Zgornji izhod prikaže vse navedene vrednosti atributa podatkov ob kliku gumba.
3. primer: Pisanje podatkovnega atributa z uporabo lastnosti »dataset«.
Ta primer zapiše atribute podatkov z lastnostjo »nabor podatkov«.
Vsebina elementa gumba se spremeni glede na trenutni scenarij:
< gumb na klik = 'jsFunc()' > Zapišite atribut podatkov gumb >Zdaj zapišite nov atribut podatkov v dodani element div:
< scenarij >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. nabor podatkov . id = 'oseba'
konzola. dnevnik ( element. nabor podatkov ) ;
}
scenarij >
V zgornjem kodnem bloku:
- ' nabor podatkov ” zapiše novo ime podatkovnega atributa “id” z določeno vrednostjo niza.
- Nato je ' conolse.log() « uporablja lastnost »dataset« za prikaz vmesnika »DOMStringMap«, ki vsebuje atribut na novo zapisanih podatkov v spletni konzoli.
Izhod
Tu konzola prikaže »DOMStringMap«, ki vsebuje nov podatkovni atribut »id«, zapisan z lastnostjo »dataset«.
Primer 4: Posodobite vrednost atributa podatkov
Ta primer posodobi obstoječo vrednost določenega podatkovnega atributa s pomočjo lastnosti »nabor podatkov«.
Besedilo elementa gumba se spremeni v skladu z danim scenarijem:
< gumb na klik = 'jsFunc()' > Posodobi atribut podatkov gumb >Zdaj pa nadaljujte z razdelkom JavaScript:
< scenarij >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. nabor podatkov . ime = 'Janez'
konzola. dnevnik ( element. nabor podatkov . ime ) ;
}
scenarij >
V zgornjem bloku kode se podana vrednost podatkovnega atributa »name« posodobi s pomočjo » nabor podatkov ” lastnina.
Izhod
Konzola ob kliku gumba prikaže posodobljeno vrednost podanih atributov podatkov.
Primer 5: Izbriši atribut podatkov
Ta primer izbriše določen podatkovni atribut z uporabo ključne besede »delete«.
Besedilo elementa gumba se spremeni glede na zahtevo:
< gumb na klik = 'jsFunc()' > Izbriši atribut podatkov gumb >Zdaj sledite bloku kode JavaScript:
< scenarij >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
izbrisati element. nabor podatkov . starost ;
konzola. dnevnik ( element. nabor podatkov . starost ) ;
}
scenarij >
Zgornji delček kode določa » izbrisati « z lastnostjo »dataset«, da izbrišete dostopni podatkovni atribut.
Izhod
Opaženo je, da konzola prikazuje ' nedoločeno « ob kliku gumba, ki jasno potrdi, da je bil atribut dostopnih podatkov izbrisan.
Zaključek
V JavaScriptu je mogoče atribute podatkov uporabiti na različne načine, kot so branje, dostop, pisanje, posodabljanje in brisanje v skladu z zahtevami. Vsa ta opravila je mogoče izvesti s pomočjo vgrajenega » nabor podatkov ” lastnina. Vendar pa lahko uporabnik dostopa do podatkovnega atributa enega za drugim s pomočjo “ getAttribute() ” metoda. Ta objava je praktično razložila uporabo atributov podatkov v JavaScriptu.