Šis įrašas paaiškins duomenų atributų naudojimą „JavaScript“.
Kaip naudoti duomenų atributus „JavaScript“?
„JavaScript“ programoje „ duomenis “ atributai naudojami papildomai informacijai, kuri nerodoma tinklalapyje, saugoti. Šią informaciją galima rašyti, pasiekti, skaityti ir dinamiškai keisti pagal vartotojo poreikius. Šioje dalyje aptarta užduotis buvo atlikta praktiškai su duomenų atributais.
Sintaksė
< elemento duomenys -*= 'kažkokia vertė' >
Aukščiau pateiktoje sintaksėje:
- “ elementas “ reiškia HTML elementą, kuriame naudojamas duomenų atributas.
- “ duomenys-* “ žymi kelis (*) duomenų atributus, prasidedančius priešdėliu (data-), t. y. duomenų raktiniu žodžiu, po kurio seka brūkšnelis.
- kažkokia vertė: Jis nurodo duomenų atributo reikšmę.
Dabar naudokite aukščiau pateiktą sintaksę, kad sukurtumėte duomenų atributą.
Sukurkite duomenų atributus
< dal id = 'myDiv' duomenis - vardas = 'Alvinas' duomenis - amžiaus = '40' duomenis - Lytis = 'Patinas' > div >Nurodytas vienos eilutės HTML kodas sukuria šį „ duomenų pavadinimas ', ' duomenų amžius ', ir ' duomenys-lytis “ atributus „div“ elemento viduje, kurio ID yra „myDiv“.
Perskaitykime/prieikime prie sukurtų duomenų atributų.
1 pavyzdys. Skaityti / pasiekti duomenų atributą naudojant „duomenų rinkinio“ nuosavybę
Šiame pavyzdyje ypatybė „duomenų rinkinys“ taikoma norint nuskaityti / pasiekti konkrečius arba visus duomenų atributus.
Pirmiausia pažiūrėkite į „ mygtuką “ elementą, kuris vadina “ jsFunc() “, kai jis susijęs “ paspaudus “ įvykis suaktyvinamas paspaudus mygtuką:
< mygtukas onclick = 'jsFunc()' > Prieigos duomenų atributas mygtuką >Dabar pereikite prie „jsFunc()“ apibrėžimo:
< scenarijus >funkcija jsFunc ( ) {
konst elementas = dokumentas. getElementById ( 'myDiv' ) ;
konsolė. žurnalas ( elementas. duomenų rinkinys ) ;
}
scenarijus >
Aukščiau pateiktose kodo eilutėse:
- „ jsFunc() “ pirmiausia deklaruoja kintamąjį „elem“, kuris taiko „ document.getElementById() “ metodą, kad pasiektumėte pridėtą div elementą per jo ID „myDiv“.
- Tada jis naudoja „ console.log() “ metodas, kuris naudos duomenų rinkinys “ ypatybę, kad pasiektumėte pasiekiamo div elemento duomenų atributus ir parodytumėte juos žiniatinklio konsolėje.
Išvestis
Paspauskite F12, kad atidarytumėte žiniatinklio konsolę:
Matyti, kad spustelėjus nurodytą mygtuką, konsolė rodo „ DOMStringMap “, kuriame yra visi div elemento duomenų atributai.
Prieiga prie konkrečios vertės
Jei vartotojas nori pasiekti konkretų duomenų atributą, nurodykite jo pavadinimą naudodami „duomenų rinkinio“ ypatybę, pavyzdžiui:
< scenarijus >funkcija gauti ( ) {
konst elementas = dokumentas. getElementById ( 'myDiv' ) ;
konsolė. žurnalas ( elementas. duomenų rinkinys . vardas ) ;
}
scenarijus >
Šiuo metu duomenų atributai „pavadinimas“ pasiekiami naudojant „ duomenų rinkinys ' nuosavybė.
Išvestis
Matyti, kad konsolė rodo tik nurodytų duomenų atributų reikšmę paspaudus mygtuką.
2 pavyzdys: Skaityti / pasiekti duomenų atributą naudojant 'getAttribute()' metodą
Šiame pavyzdyje duomenų atributams nuskaityti / pasiekti naudojamas metodas „getAttribute()“.
Šiame scenarijuje taip pat įtrauktas pirmojo pavyzdžio mygtuko elementas:
< mygtukas onclick = 'jsFunc()' > Prieigos duomenų atributas mygtuką >Pažiūrėkime apie metodo „getAttribute()“ funkcionalumą:
< scenarijus >funkcija jsFunc ( ) {
konst elementas = dokumentas. getElementById ( 'myDiv' ) ;
konsolė. žurnalas ( elementas. getAttribute ( 'duomenų pavadinimas' ) ) ;
konsolė. žurnalas ( elementas. getAttribute ( 'duomenų amžius' ) ) ;
konsolė. žurnalas ( elementas. getAttribute ( 'duomenys-lytis' ) ) ;
}
scenarijus >
Aukščiau pateiktame kodo fragmente:
- Kintamasis „elem“ taiko „ document.getElementById() “ būdas pasiekti pridėtą div elementą naudojant jo ID „myDiv“.
- Toliau „ console.log() “ metodas naudoja „ getAttribute() “ metodą, kad gautumėte nurodytą gauto div elemento „data“ atributo reikšmę ir tada parodytumėte ją žiniatinklio konsolėje.
- Ta pati užduotis atliekama norint pasiekti likusius nurodytus duomenų atributus.
Pastaba: Metodas „getAttribute()“ nurodo duomenų atributą su priešdėliu „data“, po kurio yra brūkšnelis (-), ty (data-), kurio nereikia naudojant „dataset()“ ypatybę.
Išvestis
Aukščiau pateiktame išvestyje rodomos visos nurodytos duomenų atributų reikšmės spustelėjus mygtuką.
3 pavyzdys: parašykite duomenų atributą naudodami ypatybę „duomenų rinkinys“.
Šiame pavyzdyje duomenų atributai įrašomi naudojant ypatybę „duomenų rinkinys“.
Mygtuko elemento turinys keičiamas pagal dabartinį scenarijų:
< mygtukas onclick = 'jsFunc()' > Parašykite duomenų atributą mygtuką >Dabar pridėtame div elemente parašykite naują duomenų atributą:
< scenarijus >funkcija jsFunc ( ) {
konst elementas = dokumentas. getElementById ( 'myDiv' ) ;
elementas. duomenų rinkinys . id = 'asmuo'
konsolė. žurnalas ( elementas. duomenų rinkinys ) ;
}
scenarijus >
Aukščiau esančiame kodo bloke:
- „ duomenų rinkinys “ ypatybė įrašo naują duomenų atributo pavadinimą „id“ su nurodyta eilutės reikšme.
- Toliau „ conolse.log() “ naudoja ypatybę „dataset“, kad būtų rodoma „DOMStringMap“ sąsaja, kurioje yra naujai įrašytas duomenų atributas žiniatinklio konsolėje.
Išvestis
Čia konsolė rodo „DOMStringMap“, kuriame yra naujas duomenų atributas „id“, parašytas naudojant „dataset“ ypatybę.
4 pavyzdys: atnaujinkite duomenų atributo vertę
Šiame pavyzdyje atnaujinama esama konkretaus duomenų atributo reikšmė naudojant ypatybę „dataset“.
Mygtuko elemento tekstas keičiamas pagal pateiktą scenarijų:
< mygtukas onclick = 'jsFunc()' > Atnaujinti duomenų atributą mygtuką >Dabar pereikite prie „JavaScript“ skyriaus:
< scenarijus >funkcija jsFunc ( ) {
konst elementas = dokumentas. getElementById ( 'myDiv' ) ;
elementas. duomenų rinkinys . vardas = 'Jonas'
konsolė. žurnalas ( elementas. duomenų rinkinys . vardas ) ;
}
scenarijus >
Aukščiau pateiktame kodų bloke nurodyta „name“ duomenų atributo reikšmė atnaujinama naudojant „ duomenų rinkinys ' nuosavybė.
Išvestis
Spustelėjus mygtuką, pultas rodo atnaujintą nurodytų duomenų atributų reikšmę.
5 pavyzdys: Ištrinkite duomenų atributą
Šis pavyzdys ištrina konkretų duomenų atributą naudojant raktinį žodį „Delete“.
Mygtuko elemento tekstas keičiamas pagal reikalavimą:
< mygtukas onclick = 'jsFunc()' > Ištrinti duomenų atributą mygtuką >Dabar sekite „JavaScript“ kodo bloką:
< scenarijus >funkcija jsFunc ( ) {
konst elementas = dokumentas. getElementById ( 'myDiv' ) ;
ištrinti elementą. duomenų rinkinys . amžiaus ;
konsolė. žurnalas ( elementas. duomenų rinkinys . amžiaus ) ;
}
scenarijus >
Aukščiau pateiktas kodo fragmentas nurodo „ Ištrinti “ raktinį žodį su ypatybe „dataset“, kad ištrintumėte pasiekiamų duomenų atributą.
Išvestis
Pastebima, kad konsolė rodo „ neapibrėžtas “ ant mygtuko paspaudimo, kuris aiškiai patvirtina, kad prieiga prie duomenų atributas buvo ištrintas.
Išvada
„JavaScript“ duomenų atributai gali būti naudojami įvairiais būdais, pavyzdžiui, skaityti, pasiekti, rašyti, atnaujinti ir ištrinti juos pagal reikalavimus. Visas šias užduotis galima atlikti naudojant įmontuotą ' duomenų rinkinys ' nuosavybė. Tačiau vartotojas taip pat gali pasiekti duomenų atributą po vieną, naudodamas „ getAttribute() “ metodas. Šis įrašas praktiškai paaiškino duomenų atributų naudojimą „JavaScript“.