Această postare va explica utilizarea atributelor de date în JavaScript.
Cum se utilizează atributele de date în JavaScript?
În JavaScript, „ date ” atributele sunt folosite pentru stocarea informațiilor suplimentare care nu sunt afișate pe pagina web. Aceste informații pot fi scrise, accesate, citite și modificate dinamic în funcție de cerințele utilizatorului. Această secțiune a efectuat sarcina discutată practic pe atributele datelor.
Sintaxă
< datele elementului -*= 'oarecare valoare' >
În sintaxa de mai sus:
- „ element ” reprezintă elementul HTML în care este utilizat atributul de date.
- „ date-* ” denotă atributele multiple(*) de date care încep cu prefixul (data-), adică cuvântul cheie de date urmat de o cratimă.
- ceva valoare: Specifică valoarea atributului de date.
Acum, utilizați sintaxa de mai sus pentru a crea un atribut de date.
Creați atribute de date
< div id = 'myDiv' date - Nume = 'Alvin' date - vârstă = '40' date - gen = 'masculin' > div >Codul HTML cu o linie menționat creează următorul „ nume-date ', ' data-age ', si ' date-gen ” în interiorul elementului „div” al cărui id este „myDiv”.
Să citim/accesăm atributele de date create.
Exemplul 1: Atribut de date de citire/acces folosind proprietatea „set de date”.
Acest exemplu aplică proprietatea „set de date” pentru a citi/accesa atributele specifice sau toate atributele datelor.
În primul rând, uită-te la „ buton ” element care numește „ jsFunc() ' când este asociat ' onclick ” evenimentul este declanșat la clic pe butonul:
< butonul la clic = „jsFunc()” > Atribut de date de acces buton >Acum, treceți la definiția „jsFunc()”:
< scenariu >funcția jsFunc ( ) {
const element = document. getElementById ( 'myDiv' ) ;
consolă. Buturuga ( element. set de date ) ;
}
scenariu >
În liniile de cod de mai sus:
- „ jsFunc() ” mai întâi declară o variabilă „elem” care aplică „ document.getElementById() ” pentru a accesa elementul div adăugat prin id-ul său „myDiv”.
- Apoi, folosește „ console.log() ” metoda care va folosi “ set de date ” pentru a accesa atributele de date ale elementului div accesat și pentru a le afișa în consola web.
Ieșire
Apăsați F12 pentru a deschide consola web:
Se poate observa că la clic pe butonul dat, consola afișează un „ DOMStringMap ” care conține toate atributele de date ale elementului div.
Accesați valoarea specifică
Dacă utilizatorul dorește să acceseze atributul de date specific, specificați numele acestuia cu proprietatea „set de date” astfel:
< scenariu >funcția get ( ) {
const element = document. getElementById ( 'myDiv' ) ;
consolă. Buturuga ( element. set de date . Nume ) ;
}
scenariu >
În acest moment, atributele de date „nume” sunt accesate utilizând „ set de date ” proprietate.
Ieșire
Se poate observa că consola arată doar valoarea atributelor de date specificate la clic pe buton.
Exemplul 2: Citirea/Accesarea atributului de date folosind metoda „getAttribute()”
Acest exemplu folosește metoda „getAttribute()” pentru a citi/accesa atributele datelor.
În acest scenariu, este inclus și elementul buton din primul exemplu:
< butonul la clic = „jsFunc()” > Atribut de date de acces buton >Să vedem funcționalitatea metodei „getAttribute()”:
< scenariu >funcția jsFunc ( ) {
const element = document. getElementById ( 'myDiv' ) ;
consolă. Buturuga ( element. getAttribute ( 'nume-date' ) ) ;
consolă. Buturuga ( element. getAttribute ( 'data-age' ) ) ;
consolă. Buturuga ( element. getAttribute ( 'date-gen' ) ) ;
}
scenariu >
În fragmentul de cod de mai sus:
- Variabila „elem” aplică „ document.getElementById() ” pentru a accesa elementul div adăugat folosind id-ul său „myDiv”.
- În continuare, „ console.log() ” metoda folosește “ getAttribute() ” pentru a obține valoarea specificată a atributului „date” a elementului div preluat și apoi a o afișa în consola web.
- Aceeași sarcină este efectuată pentru a accesa atributele de date specificate rămase.
Notă: Metoda „getAttribute()” specifică atributul de date cu prefixul „data” urmat de o cratimă (-), adică (data-) care nu necesită în timpul utilizării proprietății „dataset()”.
Ieșire
Ieșirea de mai sus afișează toate valorile atributelor de date specificate la clic pe buton.
Exemplul 3: Scrieți un atribut de date folosind proprietatea „set de date”.
Acest exemplu scrie atributele datelor folosind proprietatea „set de date”.
Conținutul elementului buton este modificat în funcție de scenariul actual:
< butonul la clic = „jsFunc()” > Scrieți atributul de date buton >Acum, scrieți noul atribut de date în elementul div adăugat:
< scenariu >funcția jsFunc ( ) {
const element = document. getElementById ( 'myDiv' ) ;
element. set de date . id = 'persoană'
consolă. Buturuga ( element. set de date ) ;
}
scenariu >
În blocul de cod de mai sus:
- „ set de date ” proprietatea scrie un nou nume de atribut de date „id” cu o valoare de șir specificată.
- În continuare, „ conolse.log() ” folosește proprietatea „set de date” pentru a afișa interfața „DOMStringMap” care conține atributul de date nou scris în consola web.
Ieșire
Aici, consola afișează „DOMStringMap” care conține noul atribut de date „id” scris folosind proprietatea „dataset”.
Exemplul 4: Actualizați valoarea atributului de date
Acest exemplu actualizează valoarea existentă a unui anumit atribut de date cu ajutorul proprietății „dataset”.
Textul elementului butonului este modificat conform scenariului dat:
< butonul la clic = „jsFunc()” > Actualizați atributul datelor buton >Acum, treceți la secțiunea JavaScript:
< scenariu >funcția jsFunc ( ) {
const element = document. getElementById ( 'myDiv' ) ;
element. set de date . Nume = 'Ioan'
consolă. Buturuga ( element. set de date . Nume ) ;
}
scenariu >
În blocul de cod de mai sus, valoarea specificată a atributului de date „nume” este actualizată cu ajutorul „ set de date ” proprietate.
Ieșire
Consola arată valoarea actualizată a atributelor de date specificate la clic pe buton.
Exemplul 5: Ștergeți atributul de date
Acest exemplu șterge atributul de date specific utilizând cuvântul cheie „șterge”.
Textul elementului buton este modificat conform cerințelor:
< butonul la clic = „jsFunc()” > Ștergeți atributul de date buton >Acum, urmați blocul de cod JavaScript:
< scenariu >funcția jsFunc ( ) {
const element = document. getElementById ( 'myDiv' ) ;
șterge elementul. set de date . vârstă ;
consolă. Buturuga ( element. set de date . vârstă ) ;
}
scenariu >
Fragmentul de cod de mai sus specifică „ șterge ” cuvânt cheie cu proprietatea „set de date” pentru a șterge atributul de date accesat.
Ieșire
Se observă că consola afișează „ nedefinit ” la un clic de buton care verifică clar că atributul de date accesat a fost șters.
Concluzie
În JavaScript, atributele datelor pot fi utilizate în diferite moduri, cum ar fi citirea, accesarea, scrierea, actualizarea și ștergerea acestora în funcție de cerințe. Toate aceste sarcini pot fi efectuate cu ajutorul sistemului încorporat „ set de date ” proprietate. Cu toate acestea, utilizatorul poate accesa și atributul de date unul câte unul cu ajutorul „ getAttribute() ” metoda. Această postare a explicat practic utilizarea atributelor de date în JavaScript.