Ovaj će post objasniti korištenje atributa podataka u JavaScriptu.
Kako koristiti atribute podataka u JavaScriptu?
U JavaScriptu, ' podaci ” atributi se koriste za spremanje dodatnih informacija koje se ne prikazuju na web stranici. Ove se informacije mogu pisati, pristupati im, čitati i mijenjati dinamički prema zahtjevima korisnika. Ovaj odjeljak obavio je razmatrani zadatak praktički na atributima podataka.
Sintaksa
< element podataka -*= 'neka vrijednost' >
U gornjoj sintaksi:
- “ element ” predstavlja HTML element u kojem se koristi data atribut.
- “ podaci-* ” označava višestruke (*) atribute podataka koji počinju prefiksom (data-), tj. ključnom riječi podataka nakon koje slijedi crtica.
- neka vrijednost: Određuje vrijednost atributa podataka.
Sada upotrijebite gornju sintaksu za stvaranje atributa podataka.
Stvorite atribute podataka
< div id = 'myDiv' podaci - Ime = 'Alvin' podaci - dob = '40' podaci - spol = 'muški' > div >Navedeni jednoredni HTML kod stvara sljedeće ' ime-podataka ”, “ data-doba ', i ' podatak-spol ” unutar elementa “div” čiji je ID “myDiv”.
Pročitajmo/pristupimo kreiranim atributima podataka.
Primjer 1: Čitanje/pristup atributu podataka koristeći svojstvo “dataset”.
Ovaj primjer primjenjuje svojstvo 'dataset' za čitanje/pristup određenim ili svim atributima podataka.
Prvo pogledajte ' dugme ' element koji poziva ' jsFunc() ' kada je povezan ' na klik ” događaj se pokreće nakon klika na gumb:
< gumb na klik = 'jsFunc()' > Atribut podataka o pristupu dugme >Sada prijeđite na definiciju 'jsFunc()':
< skripta >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konzola. log ( element. skup podataka ) ;
}
skripta >
U gornjim linijama koda:
- ' jsFunc() ” prvo deklarira varijablu “elem” koja primjenjuje “ document.getElementById() ” za pristup dodanom elementu div putem njegovog ID-a “myDiv”.
- Zatim koristi ' konzola.log() ' metoda koja će koristiti ' skup podataka ” za pristup atributima podataka elementa div kojem se pristupa i njihov prikaz u web konzoli.
Izlaz
Pritisnite F12 za otvaranje web konzole:
Vidi se da nakon klika na zadani gumb konzola prikazuje “ DOMStringMap ” koji sadrži sve atribute podataka elementa div.
Pristup specifičnoj vrijednosti
Ako korisnik želi pristupiti određenom atributu podataka, navedite njegovo ime sa svojstvom 'dataset' ovako:
< skripta >funkcija dobiti ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konzola. log ( element. skup podataka . Ime ) ;
}
skripta >
U ovom trenutku, atributima podataka 'name' pristupa se pomoću ' skup podataka ” vlasništvo.
Izlaz
Može se vidjeti da konzola prikazuje samo vrijednost navedenih atributa podataka nakon klika na gumb.
Primjer 2: Čitanje/pristup atributu podataka korištenjem metode 'getAttribute()'.
Ovaj primjer koristi metodu 'getAttribute()' za čitanje/pristup atributima podataka.
U ovom je scenariju također uključen element gumba iz prvog primjera:
< gumb na klik = 'jsFunc()' > Atribut podataka o pristupu dugme >Pogledajmo funkcionalnost metode 'getAttribute()':
< skripta >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konzola. log ( element. getAttribute ( 'ime-podatka' ) ) ;
konzola. log ( element. getAttribute ( 'starost podataka' ) ) ;
konzola. log ( element. getAttribute ( 'podaci-spol' ) ) ;
}
skripta >
U gornjem isječku koda:
- Varijabla 'elem' primjenjuje ' document.getElementById() ” za pristup dodanom elementu div koristeći njegov ID „myDiv”.
- Zatim, ' konzola.log() ' metoda koristi ' getAttribute() ” za dobivanje navedene vrijednosti atributa “podaci” dohvaćenog div elementa i zatim ga prikazati na web konzoli.
- Isti se zadatak izvodi za pristup preostalim navedenim atributima podataka.
Bilješka: Metoda 'getAttribute()' navodi atribut podataka s prefiksom 'data' iza kojeg slijedi crtica (-), tj. (data-) koja nije potrebna dok se koristi svojstvo 'dataset()'.
Izlaz
Gornji izlaz prikazuje sve navedene vrijednosti atributa podataka na klik na gumb.
Primjer 3: Napišite atribut podataka koristeći svojstvo 'dataset'.
Ovaj primjer zapisuje atribute podataka koristeći svojstvo 'dataset'.
Sadržaj elementa gumba mijenja se prema trenutnom scenariju:
< gumb na klik = 'jsFunc()' > Zapiši atribut podataka dugme >Sada napišite novi atribut podataka u dodani element div:
< skripta >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. skup podataka . iskaznica = 'osoba'
konzola. log ( element. skup podataka ) ;
}
skripta >
U gornjem bloku koda:
- ' skup podataka ” piše novi naziv atributa podataka “id” s navedenom vrijednošću niza.
- Zatim, ' conolse.log() ” koristi svojstvo „dataset” za prikaz sučelja „DOMStringMap” koje sadrži novonapisani atribut podataka u web konzoli.
Izlaz
Ovdje konzola prikazuje 'DOMStringMap' koji sadrži novi atribut podataka 'id' napisan pomoću svojstva 'dataset'.
Primjer 4: Ažuriranje vrijednosti atributa podataka
Ovaj primjer ažurira postojeću vrijednost određenog atributa podataka uz pomoć svojstva 'dataset'.
Tekst elementa gumba mijenja se prema zadanom scenariju:
< gumb na klik = 'jsFunc()' > Ažuriraj atribut podataka dugme >Sada prijeđite na JavaScript odjeljak:
< skripta >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. skup podataka . Ime = 'Ivan'
konzola. log ( element. skup podataka . Ime ) ;
}
skripta >
U gornjem bloku koda navedena vrijednost atributa podataka 'name' ažurira se uz pomoć ' skup podataka ” vlasništvo.
Izlaz
Konzola prikazuje ažuriranu vrijednost navedenih atributa podataka nakon klika na gumb.
Primjer 5: Brisanje atributa podataka
Ovaj primjer briše određeni atribut podataka upotrebom ključne riječi 'delete'.
Tekst elementa gumba mijenja se prema zahtjevu:
< gumb na klik = 'jsFunc()' > Izbriši atribut podataka dugme >Sada slijedite blok JavaScript koda:
< skripta >funkcija jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
izbrisati element. skup podataka . dob ;
konzola. log ( element. skup podataka . dob ) ;
}
skripta >
Gornji isječak koda navodi ' izbrisati ” ključna riječ sa svojstvom “dataset” za brisanje atributa podataka kojima se pristupa.
Izlaz
Primijećeno je da konzola prikazuje ' nedefiniran ” na klik gumba koji jasno potvrđuje da je atribut podataka kojem se pristupa izbrisan.
Zaključak
U JavaScriptu se atributi podataka mogu koristiti na različite načine kao što su čitanje, pristup, pisanje, ažuriranje i brisanje u skladu sa zahtjevima. Svi ovi zadaci mogu se obaviti uz pomoć ugrađenog ' skup podataka ” vlasništvo. Međutim, korisnik također može pristupiti atributu podataka jedan po jedan uz pomoć ' getAttribute() ” metoda. Ovaj post je praktično objasnio korištenje atributa podataka u JavaScriptu.