In dit bericht wordt het gebruik van data-attributen in JavaScript uitgelegd.
Hoe gegevensattributen in JavaScript te gebruiken?
In JavaScript wordt de “ gegevens ”-attributen worden gebruikt voor het opslaan van extra informatie die niet op de webpagina wordt weergegeven. Deze informatie kan dynamisch worden geschreven, geopend, gelezen en gewijzigd volgens de vereisten van de gebruiker. In deze sectie werd de besproken taak praktisch uitgevoerd op data-attributen.
Syntaxis
< elementgegevens -*= 'enige waarde' >
In de bovenstaande syntaxis:
- “ element ” vertegenwoordigt het HTML-element waarin het data-attribuut wordt gebruikt.
- “ gegevens-* ” geeft de meerdere(*) data-attributen aan, beginnend met het voorvoegsel (data-), d.w.z. data-trefwoord gevolgd door een koppelteken.
- enige waarde: Het specificeert de waarde van het data-attribuut.
Gebruik nu de bovenstaande syntaxis om een data-attribuut te maken.
Gegevensattributen maken
< div id = 'mijnDiv' gegevens - naam = 'Alvin' gegevens - leeftijd = '40' gegevens - geslacht = 'mannelijk' > div >De genoemde éénregelige HTML-code creëert het volgende “ gegevensnaam ', ' data-leeftijd ', en de ' gegevens-geslacht ”attributen binnen het “div”-element waarvan de id “myDiv” is.
Laten we de gemaakte gegevensattributen lezen/openen.
Voorbeeld 1: Gegevenskenmerk lezen/toegang verkrijgen met behulp van de eigenschap “dataset”.
In dit voorbeeld wordt de eigenschap 'dataset' toegepast om de specifieke of alle gegevensattributen te lezen/toegang te krijgen.
Kijk eerst eens naar de “ knop '-element dat de ' jsFunc() 'wanneer het geassocieerd is' bij klikken ”-gebeurtenis wordt geactiveerd bij een klik op de knop:
< knop opklik = 'jsFunc()' > Toegang tot gegevenskenmerk knop >Ga nu verder met de definitie van “jsFunc()”:
< script >functie jsFunc ( ) {
const element = document. getElementById ( 'mijnDiv' ) ;
troosten. loggen ( element. gegevensset ) ;
}
script >
In de bovenstaande coderegels:
- De ' jsFunc() ” declareert eerst een variabele “elem” die de “ document.getElementById() ”-methode om toegang te krijgen tot het toegevoegde div-element via de id “myDiv”.
- Vervolgens gebruikt het de “ console.log() 'methode die gebruikmaakt van de' gegevensset ”-eigenschap om toegang te krijgen tot de gegevensattributen van het geopende div-element en deze weer te geven in de webconsole.
Uitvoer
Druk op F12 om de webconsole te openen:
Het is te zien dat bij het klikken op de gegeven knop, de console een “ DOMStringMap ” met alle gegevensattributen van het div-element.
Toegang tot specifieke waarde
Als de gebruiker toegang wil tot het specifieke data-attribuut, specificeer dan de naam ervan met de eigenschap “dataset” als volgt:
< script >functie krijgen ( ) {
const element = document. getElementById ( 'mijnDiv' ) ;
troosten. loggen ( element. gegevensset . naam ) ;
}
script >
Op dit moment zijn de gegevenskenmerken “naam” toegankelijk via de “ gegevensset ' eigendom.
Uitvoer
Het is duidelijk dat de console alleen de waarde van gespecificeerde data-attributen toont als er op een knop wordt geklikt.
Voorbeeld 2: Gegevenskenmerk lezen/toegang verkrijgen met behulp van de methode “getAttribute()”.
In dit voorbeeld wordt de methode “getAttribute()” gebruikt om de gegevensattributen te lezen/toegang te krijgen.
In dit scenario is ook het knopelement uit het eerste voorbeeld opgenomen:
< knop opklik = 'jsFunc()' > Toegang tot gegevenskenmerk knop >Laten we eens kijken naar de functionaliteit van de methode “getAttribute()”:
< script >functie jsFunc ( ) {
const element = document. getElementById ( 'mijnDiv' ) ;
troosten. loggen ( element. getAttribuut ( 'gegevensnaam' ) ) ;
troosten. loggen ( element. getAttribuut ( 'data-tijdperk' ) ) ;
troosten. loggen ( element. getAttribuut ( 'gegevens-geslacht' ) ) ;
}
script >
In het bovenstaande codefragment:
- De variabele “elem” past de “ document.getElementById() ”-methode om toegang te krijgen tot het toegevoegde div-element met behulp van de id “myDiv”.
- Vervolgens wordt de “ console.log() 'methode maakt gebruik van de' getAttribute() ”-methode om de opgegeven “data”-attribuutwaarde van het opgehaalde div-element op te halen en deze vervolgens in de webconsole weer te geven.
- Dezelfde taak wordt uitgevoerd om toegang te krijgen tot de resterende gespecificeerde gegevensattributen.
Opmerking: De methode “getAttribute()” specificeert het data-attribuut met het voorvoegsel “data” gevolgd door een koppelteken(-) d.w.z. (data-) dat niet vereist is bij gebruik van de eigenschap “dataset()”.
Uitvoer
De bovenstaande uitvoer toont alle gespecificeerde gegevensattribuutwaarden bij een klik op de knop.
Voorbeeld 3: Schrijf een data-attribuut met behulp van de eigenschap “dataset”.
In dit voorbeeld worden de gegevensattributen geschreven met behulp van de eigenschap “dataset”.
De inhoud van het knopelement wordt gewijzigd volgens het huidige scenario:
< knop opklik = 'jsFunc()' > Gegevenskenmerk schrijven knop >Schrijf nu het nieuwe data-attribuut in het toegevoegde div-element:
< script >functie jsFunc ( ) {
const element = document. getElementById ( 'mijnDiv' ) ;
element. gegevensset . ID kaart = 'persoon'
troosten. loggen ( element. gegevensset ) ;
}
script >
In het bovenstaande codeblok:
- De ' gegevensset De eigenschap schrijft een nieuwe gegevensattribuutnaam “id” met een opgegeven tekenreekswaarde.
- Vervolgens wordt de “ conolse.log() ” gebruikt de eigenschap “dataset” om de “DOMStringMap”-interface met het nieuw geschreven data-attribuut in de webconsole weer te geven.
Uitvoer
Hier geeft de console de “DOMStringMap” weer met daarin het nieuwe data-attribuut “id” geschreven met behulp van de eigenschap “dataset”.
Voorbeeld 4: Gegevenskenmerkwaarde bijwerken
In dit voorbeeld wordt de bestaande waarde van een specifiek data-attribuut bijgewerkt met behulp van de eigenschap “dataset”.
De tekst van het knopelement wordt gewijzigd volgens het gegeven scenario:
< knop opklik = 'jsFunc()' > Gegevenskenmerk bijwerken knop >Ga nu verder naar de JavaScript-sectie:
< script >functie jsFunc ( ) {
const element = document. getElementById ( 'mijnDiv' ) ;
element. gegevensset . naam = 'John'
troosten. loggen ( element. gegevensset . naam ) ;
}
script >
In het bovenstaande codeblok wordt de opgegeven gegevensattribuutwaarde “naam” bijgewerkt met behulp van de “ gegevensset ' eigendom.
Uitvoer
De console toont de bijgewerkte waarde van de opgegeven gegevensattributen wanneer u op een knop klikt.
Voorbeeld 5: Gegevenskenmerk verwijderen
In dit voorbeeld wordt het specifieke gegevensattribuut verwijderd door het trefwoord 'verwijderen' te gebruiken.
De tekst van het knopelement wordt naar wens gewijzigd:
< knop opklik = 'jsFunc()' > Gegevenskenmerk verwijderen knop >Volg nu het JavaScript-codeblok:
< script >functie jsFunc ( ) {
const element = document. getElementById ( 'mijnDiv' ) ;
element verwijderen. gegevensset . leeftijd ;
troosten. loggen ( element. gegevensset . leeftijd ) ;
}
script >
Het bovenstaande codefragment specificeert de “ verwijderen ”-trefwoord met de eigenschap “dataset” om het geopende gegevensattribuut te verwijderen.
Uitvoer
Er wordt opgemerkt dat de console “ ongedefinieerd ' met een klik op de knop die duidelijk verifieert dat het geopende gegevensattribuut is verwijderd.
Conclusie
In JavaScript kunnen de gegevensattributen op verschillende manieren worden gebruikt, zoals lezen, openen, schrijven, bijwerken en verwijderen volgens de vereisten. Al deze taken kunnen worden uitgevoerd met behulp van de ingebouwde “ gegevensset ' eigendom. De gebruiker kan echter ook één voor één toegang krijgen tot het data-attribuut met behulp van de “ getAttribute() methode. In dit bericht wordt het gebruik van data-attributen in JavaScript praktisch uitgelegd.