Šajā rakstā tiks izskaidrota datu atribūtu izmantošana JavaScript.
Kā izmantot datu atribūtus JavaScript?
Programmā JavaScript “ datus ” atribūti tiek izmantoti, lai saglabātu papildu informāciju, kas netiek rādīta tīmekļa lapā. Šo informāciju var rakstīt, tai piekļūt, lasīt un dinamiski mainīt atbilstoši lietotāja prasībām. Šī sadaļa veica aplūkoto uzdevumu praktiski uz datu atribūtiem.
Sintakse
< elementu dati -*= 'kāda vērtība' >
Iepriekš minētajā sintaksē:
- ' elements ” apzīmē HTML elementu, kurā tiek izmantots datu atribūts.
- ' dati-* ” apzīmē vairākus (*) datu atribūtus, kas sākas ar prefiksu (data-), t.i., datu atslēgvārdu, kam seko defise.
- kaut kāda vērtība: Tas norāda datu atribūta vērtību.
Tagad izmantojiet iepriekš minēto sintaksi, lai izveidotu datu atribūtu.
Izveidojiet datu atribūtus
< div id = 'myDiv' datus - nosaukums = 'Alvins' datus - vecums = '40' datus - dzimums = 'vīrietis' > div >Norādītais vienas rindas HTML kods izveido šādu ' datu nosaukums ',' datu vecums ”, un “ dati-dzimums ” atribūti elementā “div”, kura ID ir “myDiv”.
Lasīsim/piekļūsim izveidotajiem datu atribūtiem.
1. piemērs. Lasiet/piekļūstiet datu atribūtam, izmantojot rekvizītu “dataset”.
Šis piemērs izmanto rekvizītu “datu kopa”, lai lasītu/piekļūtu konkrētiem vai visiem datu atribūtiem.
Vispirms apskatiet ' pogu 'elements, kas izsauc ' jsFunc() ', kad tas ir saistīts' onclick ” notikums tiek aktivizēts, noklikšķinot uz pogas:
< pogu onclick = 'jsFunc()' > Piekļuves datu atribūts pogu >Tagad pārejiet pie “jsFunc()” definīcijas:
< skripts >funkcija jsFunc ( ) {
konst elements = dokumentu. getElementById ( 'myDiv' ) ;
konsole. žurnāls ( elements. datu kopa ) ;
}
skripts >
Iepriekš minētajās koda rindās:
- ' jsFunc() ” vispirms deklarē mainīgo “elem”, kas piemēro “ document.getElementById() ” metode, lai piekļūtu pievienotajam div elementam, izmantojot tā ID “myDiv”.
- Tālāk tas izmanto ' console.log() metodi, kas izmantos datu kopa ” rekvizītu, lai piekļūtu piekļūtā div elementa datu atribūtiem un parādītu tos tīmekļa konsolē.
Izvade
Nospiediet F12, lai atvērtu tīmekļa konsoli:
Var redzēt, ka, noklikšķinot uz dotās pogas, konsole parāda ' DOMStringMap ” satur visus div elementa datu atribūtus.
Piekļūstiet konkrētajai vērtībai
Ja lietotājs vēlas piekļūt konkrētajam datu atribūtam, norādiet tā nosaukumu ar rekvizītu “dataset” šādi:
< skripts >funkcija iegūt ( ) {
konst elements = dokumentu. getElementById ( 'myDiv' ) ;
konsole. žurnāls ( elements. datu kopa . nosaukums ) ;
}
skripts >
Šobrīd datu atribūtiem “name” var piekļūt, izmantojot “ datu kopa ” īpašums.
Izvade
Redzams, ka, noklikšķinot uz pogas, konsole parāda tikai norādīto datu atribūtu vērtību.
2. piemērs. Lasiet/piekļūstiet datu atribūtam, izmantojot metodi “getAttribute()”.
Šajā piemērā datu atribūtu lasīšanai/piekļuvei tiek izmantota metode “getAttribute()”.
Šajā scenārijā ir iekļauts arī pirmā piemēra pogas elements:
< pogu onclick = 'jsFunc()' > Piekļuves datu atribūts pogu >Apskatīsim metodes “getAttribute()” funkcionalitāti:
< skripts >funkcija jsFunc ( ) {
konst elements = dokumentu. getElementById ( 'myDiv' ) ;
konsole. žurnāls ( elements. getAttribute ( 'datu nosaukums' ) ) ;
konsole. žurnāls ( elements. getAttribute ( 'datu vecums' ) ) ;
konsole. žurnāls ( elements. getAttribute ( 'dati-dzimums' ) ) ;
}
skripts >
Iepriekš minētajā koda fragmentā:
- Mainīgais “elem” piemēro “ document.getElementById() ” metode, lai piekļūtu pievienotajam div elementam, izmantojot tā ID “myDiv”.
- Tālāk “ console.log() ” metode izmanto “ getAttribute() ” metodi, lai iegūtu norādīto “data” atribūta vērtību ienestajam div elementam un pēc tam parādītu to tīmekļa konsolē.
- Tas pats uzdevums tiek veikts, lai piekļūtu atlikušajiem norādītajiem datu atribūtiem.
Piezīme: Metode “getAttribute()” norāda datu atribūtu ar prefiksu “data”, kam seko defise (-), t.i., (data-), kas nav nepieciešams, izmantojot rekvizītu “dataset()”.
Izvade
Iepriekš redzamajā izvadē tiek parādītas visas norādītās datu atribūtu vērtības, noklikšķinot uz pogas.
3. piemērs: ierakstiet datu atribūtu, izmantojot rekvizītu “dataset”.
Šajā piemērā datu atribūti tiek ierakstīti, izmantojot rekvizītu “dataset”.
Pogas elementa saturs tiek mainīts atbilstoši pašreizējam scenārijam:
< pogu onclick = 'jsFunc()' > Ierakstiet datu atribūtu pogu >Tagad pievienotajā div elementā ierakstiet jauno datu atribūtu:
< skripts >funkcija jsFunc ( ) {
konst elements = dokumentu. getElementById ( 'myDiv' ) ;
elements. datu kopa . id = 'persona'
konsole. žurnāls ( elements. datu kopa ) ;
}
skripts >
Iepriekš minētajā koda blokā:
- ' datu kopa ” rekvizīts ieraksta jaunu datu atribūta nosaukumu “id” ar norādītu virknes vērtību.
- Tālāk “ conolse.log() ” izmanto rekvizītu “dataset”, lai parādītu saskarni “DOMStringMap”, kas satur tikko ierakstīto datu atribūtu tīmekļa konsolē.
Izvade
Šeit konsole parāda “DOMStringMap”, kas satur jauno datu atribūtu “id”, kas rakstīts, izmantojot rekvizītu “dataset”.
4. piemērs. Atjauniniet datu atribūta vērtību
Šajā piemērā tiek atjaunināta konkrēta datu atribūta esošā vērtība, izmantojot rekvizītu “dataset”.
Pogas elementa teksts tiek mainīts atbilstoši dotajam scenārijam:
< pogu onclick = 'jsFunc()' > Atjauniniet datu atribūtu pogu >Tagad pārejiet uz JavaScript sadaļu:
< skripts >funkcija jsFunc ( ) {
konst elements = dokumentu. getElementById ( 'myDiv' ) ;
elements. datu kopa . nosaukums = 'Džons'
konsole. žurnāls ( elements. datu kopa . nosaukums ) ;
}
skripts >
Iepriekš minētajā koda blokā norādītā “name” datu atribūta vērtība tiek atjaunināta, izmantojot “ datu kopa ” īpašums.
Izvade
Noklikšķinot uz pogas, konsole parāda norādīto datu atribūtu atjaunināto vērtību.
5. piemērs. Dzēst datu atribūtu
Šajā piemērā tiek dzēsts konkrētais datu atribūts, izmantojot atslēgvārdu “dzēst”.
Pogas elementa teksts tiek mainīts atbilstoši prasībām:
< pogu onclick = 'jsFunc()' > Dzēst datu atribūtu pogu >Tagad izpildiet JavaScript koda bloku:
< skripts >funkcija jsFunc ( ) {
konst elements = dokumentu. getElementById ( 'myDiv' ) ;
dzēst elementu. datu kopa . vecums ;
konsole. žurnāls ( elements. datu kopa . vecums ) ;
}
skripts >
Iepriekš minētais koda fragments norāda ' dzēst ” atslēgvārdu ar rekvizītu “dataset”, lai dzēstu piekļūto datu atribūtu.
Izvade
Tiek novērots, ka konsole parāda “ nenoteikts ” noklikšķiniet uz pogas, kas skaidri pārbauda, vai piekļuves datu atribūts ir dzēsts.
Secinājums
Programmā JavaScript datu atribūtus var izmantot dažādos veidos, piemēram, lasīt, piekļūt, rakstīt, atjaunināt un dzēst tos atbilstoši prasībām. Visus šos uzdevumus var veikt, izmantojot iebūvēto ' datu kopa ” īpašums. Tomēr lietotājs var arī piekļūt datu atribūtam pa vienam, izmantojot “ getAttribute() ” metode. Šis ieraksts ir praktiski izskaidrojis datu atribūtu izmantošanu JavaScript.