Ez a bejegyzés elmagyarázza az adatattribútumok használatát a JavaScriptben.
Hogyan használjunk adatattribútumokat a JavaScriptben?
A JavaScriptben a „ adat ” attribútumok olyan extra információk tárolására szolgálnak, amelyek nem jelennek meg a weboldalon. Ezek az információk dinamikusan írhatók, hozzáférhetők, olvashatók és módosíthatók a felhasználó igényei szerint. Ez a rész gyakorlatilag adatattribútumokon végezte el a tárgyalt feladatot.
Szintaxis
< elem adatai -*= 'valami értékű' >
A fenti szintaxisban:
- ' elem ” jelenti azt a HTML-elemet, amelyben az adatattribútumot használják.
- ' adat-* ” a többszörös (*) adatattribútumokat jelöli, amelyek az előtaggal (data-) kezdődnek, azaz az adatkulcsszót kötőjel követi.
- valami érték: Megadja az adatattribútum értékét.
Most használja a fenti szintaxist egy adatattribútum létrehozásához.
Adatattribútumok létrehozása
< div id = 'myDiv' adat - név = 'Alvin' adat - kor = '40' adat - neme = 'férfi' > div >A megadott egysoros HTML-kód létrehozza a következőt: adatnév ', ' adat-kor ', és a ' adat-nem ” attribútumok a „div” elemen belül, amelynek azonosítója „myDiv”.
Olvassuk/férjünk hozzá a létrehozott adatattribútumokhoz.
1. példa: Adatattribútum olvasása/hozzáférése „dataset” tulajdonság használatával
Ez a példa a „dataset” tulajdonságot alkalmazza az adott vagy az összes adatattribútum olvasásához/hozzáféréséhez.
Először nézze meg a „ gomb ' elem, amely a ' jsFunc() 'amikor hozzá tartozik' kattintásra ” esemény a gombra kattintva indul el:
< gomb onclick = 'jsFunc()' > Access Data Attribútum gomb >Most lépjen tovább a „jsFunc()” definícióhoz:
< forgatókönyv >függvény jsFunc ( ) {
const elem = dokumentum. getElementById ( 'myDiv' ) ;
konzol. log ( elem. adatkészlet ) ;
}
forgatókönyv >
A fenti kódsorokban:
- A ' jsFunc() ” először deklarál egy „elem” változót, amely alkalmazza a „ document.getElementById() ” metódussal érheti el a hozzáadott div elemet annak „myDiv” azonosítóján keresztül.
- Ezután a „ console.log() ' módszer, amely a ' adatkészlet ” tulajdonság az elért div elem adatattribútumainak eléréséhez és a webkonzolon való megjelenítéséhez.
Kimenet
Nyomja meg az F12 billentyűt a webkonzol megnyitásához:
Látható, hogy az adott gombra kattintva a konzolon megjelenik egy „ DOMStringMap ” tartalmazza a div elem összes adatattribútumait.
Adott érték elérése
Ha a felhasználó hozzá akar férni az adott adatattribútumhoz, adja meg a nevét a „dataset” tulajdonsággal, így:
< forgatókönyv >függvény get ( ) {
const elem = dokumentum. getElementById ( 'myDiv' ) ;
konzol. log ( elem. adatkészlet . név ) ;
}
forgatókönyv >
Jelenleg a „name” adatattribútumokhoz a „ adatkészlet ' ingatlan.
Kimenet
Látható, hogy a konzol gombnyomásra csak a megadott adatattribútumok értékét mutatja.
2. példa: Adatattribútum olvasása/hozzáférése a „getAttribute()” módszerrel
Ez a példa a „getAttribute()” metódust használja az adatattribútumok olvasásához/hozzáféréséhez.
Ebben a forgatókönyvben az első példa gombeleme is szerepel:
< gomb onclick = 'jsFunc()' > Access Data Attribútum gomb >Lássuk a „getAttribute()” metódus működését:
< forgatókönyv >függvény jsFunc ( ) {
const elem = dokumentum. getElementById ( 'myDiv' ) ;
konzol. log ( elem. getAttribute ( 'adatnév' ) ) ;
konzol. log ( elem. getAttribute ( 'adatkor' ) ) ;
konzol. log ( elem. getAttribute ( 'adat-nem' ) ) ;
}
forgatókönyv >
A fenti kódrészletben:
- Az „elem” változó a „ document.getElementById() ” metódussal hozzáférhet a hozzáadott div elemhez a „myDiv” azonosítójával.
- Ezután a „ console.log() ' módszer a ' getAttribute() ” metódussal kapja meg a lekért div elem megadott „data” attribútumértékét, majd jelenítse meg azt a webkonzolon.
- Ugyanezt a feladatot hajtja végre a többi megadott adatattribútum eléréséhez.
Jegyzet: A „getAttribute()” metódus az adatattribútumot a „data” előtaggal, majd egy kötőjellel (-) követi, azaz (data-), amelyre nincs szükség a „dataset()” tulajdonság használatakor.
Kimenet
A fenti kimenet megjeleníti az összes megadott adatattribútum értéket a gombra kattintva.
3. példa: Írjon adatattribútumot a „dataset” tulajdonság használatával
Ez a példa az adatattribútumokat a „dataset” tulajdonság használatával írja.
A gombelem tartalma az aktuális forgatókönyv szerint módosul:
< gomb onclick = 'jsFunc()' > Adatattribútum írása gomb >Most írja be az új adatattribútumot a hozzáadott div elembe:
< forgatókönyv >függvény jsFunc ( ) {
const elem = dokumentum. getElementById ( 'myDiv' ) ;
elem. adatkészlet . id = 'személy'
konzol. log ( elem. adatkészlet ) ;
}
forgatókönyv >
A fenti kódblokkban:
- A ' adatkészlet ” tulajdonság egy új „id” adatattribútumnevet ír megadott karakterlánc értékkel.
- Ezután a „ conolse.log() ” a „dataset” tulajdonságot használja az újonnan írt adatattribútumot tartalmazó „DOMStringMap” felület megjelenítéséhez a webkonzolon.
Kimenet
Itt a konzol megjeleníti a „DOMStringMap”-et, amely az „id” új adatattribútumot tartalmazza a „dataset” tulajdonság segítségével.
4. példa: Frissítse az adatattribútum értékét
Ez a példa frissíti egy adott adatattribútum meglévő értékét a „dataset” tulajdonság segítségével.
A gombelem szövege az adott forgatókönyv szerint módosul:
< gomb onclick = 'jsFunc()' > Adatattribútum frissítése gomb >Most lépjen tovább a JavaScript szakaszra:
< forgatókönyv >függvény jsFunc ( ) {
const elem = dokumentum. getElementById ( 'myDiv' ) ;
elem. adatkészlet . név = 'János'
konzol. log ( elem. adatkészlet . név ) ;
}
forgatókönyv >
A fenti kódblokkban a megadott „name” adatattribútum értéke a „ adatkészlet ' ingatlan.
Kimenet
A konzol gombnyomásra megjeleníti a megadott adatattribútumok frissített értékét.
5. példa: Adatattribútum törlése
Ez a példa törli az adott adatattribútumot a „delete” kulcsszó használatával.
A gombelem szövege igény szerint módosul:
< gomb onclick = 'jsFunc()' > Adatattribútum törlése gomb >Most kövesse a JavaScript kódblokkot:
< forgatókönyv >függvény jsFunc ( ) {
const elem = dokumentum. getElementById ( 'myDiv' ) ;
delete elem. adatkészlet . kor ;
konzol. log ( elem. adatkészlet . kor ) ;
}
forgatókönyv >
A fenti kódrészlet a „ töröl ” kulcsszó a „dataset” tulajdonsággal az elért adatok attribútumának törléséhez.
Kimenet
Megfigyelhető, hogy a konzol a következőt mutatja: határozatlan ” gombra kattintás, amely egyértelműen igazolja, hogy a hozzáfért adatok attribútuma törölve lett.
Következtetés
A JavaScriptben az adatattribútumok többféleképpen használhatók, például olvasni, elérni, írni, frissíteni és törölni őket a követelményeknek megfelelően. Mindezek a feladatok a beépített „ adatkészlet ' ingatlan. A felhasználó azonban egyenként is elérheti az adatattribútumot a „ getAttribute() ” módszerrel. Ez a bejegyzés gyakorlatilag elmagyarázta az adatattribútumok használatát a JavaScriptben.