Tento príspevok vysvetlí použitie atribútov údajov v JavaScripte.
Ako používať atribúty údajov v JavaScripte?
V JavaScripte je „ údajov Atribúty ” sa používajú na ukladanie dodatočných informácií, ktoré sa nezobrazujú na webovej stránke. Tieto informácie možno zapisovať, pristupovať, čítať a dynamicky meniť podľa požiadaviek používateľa. Táto sekcia vykonala diskutovanú úlohu prakticky na dátových atribútoch.
Syntax
< dáta prvku -*= 'nejaká hodnota' >
Vo vyššie uvedenej syntaxi:
- “ element ” predstavuje HTML element, v ktorom je použitý dátový atribút.
- “ údaje-* ” označuje viacnásobné (*) atribúty údajov začínajúce predponou (data-), t. j. kľúčové slovo údajov, za ktorým nasleduje spojovník.
- nejaká hodnota: Špecifikuje hodnotu dátového atribútu.
Teraz použite vyššie uvedenú syntax na vytvorenie atribútu údajov.
Vytvorte atribúty údajov
< div id = 'myDiv' údajov - názov = 'Alvin' údajov - Vek = '40' údajov - rod = 'Muž' > div >Uvedený jednoriadkový HTML kód vytvára nasledovné „ data-name ',' dátový vek “ a „ data-gender ” v elemente “div”, ktorého id je “myDiv”.
Poďme si prečítať/prístup k vytvoreným dátovým atribútom.
Príklad 1: Čítanie/prístup k atribútu údajov pomocou vlastnosti „množina údajov“.
Tento príklad aplikuje vlastnosť „dataset“ na čítanie/prístup k špecifickým alebo všetkým atribútom údajov.
Najprv sa pozrite na „ tlačidlo prvok, ktorý volá „ jsFunc() “, keď je priradený “ po kliknutí “ udalosť sa spustí po kliknutí na tlačidlo:
< tlačidlo onclick = 'jsFunc()' > Atribút prístupových údajov tlačidlo >Teraz prejdite na definíciu „jsFunc()“:
< skript >funkcia jsFunc ( ) {
konšt element = dokument. getElementById ( 'myDiv' ) ;
konzoly. log ( element. súbor údajov ) ;
}
skript >
Vo vyššie uvedených riadkoch kódu:
- ' jsFunc() “ najprv deklaruje premennú „elem“, ktorá aplikuje „ document.getElementById() ” na prístup k pridanému prvku div prostredníctvom jeho ID „myDiv“.
- Ďalej používa „ console.log() “, ktorá bude používať „ súbor údajov ” na prístup k dátovým atribútom prvku div, ku ktorému sa pristupuje, a ich zobrazenie vo webovej konzole.
Výkon
Stlačením klávesu F12 otvorte webovú konzolu:
Je vidieť, že po kliknutí na dané tlačidlo sa na konzole zobrazí „ DOMStringMap ” obsahujúci všetky atribúty údajov prvku div.
Špecifická hodnota prístupu
Ak chce používateľ získať prístup ku konkrétnemu dátovému atribútu, zadajte jeho názov pomocou vlastnosti „dataset“ takto:
< skript >získať funkciu ( ) {
konšt element = dokument. getElementById ( 'myDiv' ) ;
konzoly. log ( element. súbor údajov . názov ) ;
}
skript >
V súčasnosti sa k atribútom údajov „name“ pristupuje pomocou „ súbor údajov ' nehnuteľnosť.
Výkon
Je vidieť, že konzola po kliknutí na tlačidlo zobrazuje iba hodnotu špecifikovaných dátových atribútov.
Príklad 2: Čítanie/prístup k atribútu údajov pomocou metódy „getAttribute()“.
Tento príklad používa metódu „getAttribute()“ na čítanie/prístup k atribútom údajov.
V tomto scenári je zahrnutý aj prvok tlačidla z prvého príkladu:
< tlačidlo onclick = 'jsFunc()' > Atribút prístupových údajov tlačidlo >Pozrime sa na funkčnosť metódy „getAttribute()“:
< skript >funkcia jsFunc ( ) {
konšt element = dokument. getElementById ( 'myDiv' ) ;
konzoly. log ( element. getAttribute ( 'názov údajov' ) ) ;
konzoly. log ( element. getAttribute ( 'údajový vek' ) ) ;
konzoly. log ( element. getAttribute ( 'data-gender' ) ) ;
}
skript >
Vo vyššie uvedenom útržku kódu:
- Premenná „elem“ aplikuje „ document.getElementById() ” na prístup k pridanému prvku div pomocou jeho id „myDiv“.
- Ďalej, „ console.log() “ metóda používa “ getAttribute() “, aby ste získali špecifikovanú hodnotu atribútu „data“ načítaného prvku div a potom ho zobrazili vo webovej konzole.
- Rovnaká úloha sa vykoná na prístup k zostávajúcim špecifikovaným dátovým atribútom.
Poznámka: Metóda „getAttribute()“ špecifikuje atribút údajov s predponou „data“, za ktorou nasleduje spojovník (-), t. j. (data-), ktorý sa pri použití vlastnosti „dataset()“ nevyžaduje.
Výkon
Vyššie uvedený výstup zobrazí všetky špecifikované hodnoty atribútov údajov po kliknutí na tlačidlo.
Príklad 3: Napíšte atribút údajov pomocou vlastnosti „dataset“.
Tento príklad zapisuje atribúty údajov pomocou vlastnosti „dataset“.
Obsah prvku tlačidla sa mení podľa aktuálneho scenára:
< tlačidlo onclick = 'jsFunc()' > Napíšte atribút údajov tlačidlo >Teraz napíšte nový dátový atribút do pridaného prvku div:
< skript >funkcia jsFunc ( ) {
konšt element = dokument. getElementById ( 'myDiv' ) ;
element. súbor údajov . id = 'osoba'
konzoly. log ( element. súbor údajov ) ;
}
skript >
Vo vyššie uvedenom bloku kódu:
- ' súbor údajov Vlastnosť ” zapíše nový názov dátového atribútu „id“ so zadanou hodnotou reťazca.
- Ďalej, „ conolse.log() ” používa vlastnosť “dataset” na zobrazenie rozhrania “DOMStringMap” obsahujúceho novo zapísaný dátový atribút vo webovej konzole.
Výkon
Tu konzola zobrazí „DOMStringMap“ obsahujúcu nový dátový atribút „id“ napísaný pomocou vlastnosti „dataset“.
Príklad 4: Aktualizujte hodnotu atribútu údajov
Tento príklad aktualizuje existujúcu hodnotu špecifického atribútu údajov pomocou vlastnosti „dataset“.
Text prvku tlačidla sa zmení podľa daného scenára:
< tlačidlo onclick = 'jsFunc()' > Aktualizovať atribút údajov tlačidlo >Teraz prejdite do sekcie JavaScript:
< skript >funkcia jsFunc ( ) {
konšt element = dokument. getElementById ( 'myDiv' ) ;
element. súbor údajov . názov = 'John'
konzoly. log ( element. súbor údajov . názov ) ;
}
skript >
Vo vyššie uvedenom bloku kódu sa zadaná hodnota atribútu údajov „name“ aktualizuje pomocou „ súbor údajov ' nehnuteľnosť.
Výkon
Konzola po kliknutí na tlačidlo zobrazí aktualizovanú hodnotu špecifikovaných atribútov údajov.
Príklad 5: Vymazanie dátového atribútu
Tento príklad vymaže špecifický dátový atribút pomocou kľúčového slova „delete“.
Text prvku tlačidla sa mení podľa požiadavky:
< tlačidlo onclick = 'jsFunc()' > Odstrániť atribút údajov tlačidlo >Teraz postupujte podľa bloku kódu JavaScript:
< skript >funkcia jsFunc ( ) {
konšt element = dokument. getElementById ( 'myDiv' ) ;
odstrániť prvok. súbor údajov . Vek ;
konzoly. log ( element. súbor údajov . Vek ) ;
}
skript >
Vyššie uvedený útržok kódu špecifikuje „ vymazať ” s vlastnosťou “dataset” na odstránenie atribútu sprístupnených údajov.
Výkon
Zistilo sa, že konzola zobrazuje „ nedefinované ” po kliknutí na tlačidlo, ktoré jasne overí, že atribút prístupných údajov bol vymazaný.
Záver
V JavaScripte môžu byť dátové atribúty použité rôznymi spôsobmi, ako je čítanie, prístup, zápis, aktualizácia a mazanie podľa požiadaviek. Všetky tieto úlohy je možné vykonávať pomocou vstavaného „ súbor údajov ' nehnuteľnosť. Používateľ však môže k atribútu údajov pristupovať aj jeden po druhom pomocou „ getAttribute() “. Tento príspevok prakticky vysvetlil použitie atribútov údajov v JavaScripte.