Aangepaste attributen in JavaScript
In HTML is het toegestaan om uw eigen, aangepaste
attributen aan tags toe te voegen. Dergelijke attributen moeten beginnen
met data-, gevolgd door een willekeurige
attribuutnaam die u geschikt vindt.
Aangepaste attributen kunnen op een groot aantal verschillende manieren worden gebruikt. Veel van deze manieren zullen we later in de zelfstudie bestuderen, en nog meer zult u in de toekomst zelf kunnen bedenken.
De toegang tot dergelijke attributen is niet op een standaard
manier geregeld. U kunt niet eenvoudigweg toegang krijgen tot de eigenschap van het element met dezelfde naam, zoals we eerder deden.
In plaats daarvan moet u de speciale eigenschap
dataset gebruiken, waarna de naam van het attribuut
zonder data- wordt geschreven. Bijvoorbeeld,
als ons attribuut data-test heet,
dan schrijven we elem.dataset.test om er toegang toe te krijgen,
waarbij elem de variabele met ons element is.
Laten we een voorbeeld bekijken. Stel dat we het volgende element hebben:
<div id="elem" data-num="1000"></div>
Laten we de waarde van zijn attribuut data-num op het scherm weergeven:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // geeft 1000 weer
En laten we nu een andere waarde aan dit attribuut toekennen:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Gegeven de volgende code:
<div id="elem" data-text="str">text</div>
Zorg ervoor dat bij een klik op de div aan het einde
van zijn tekst de inhoud van zijn attribuut
data-text wordt toegevoegd.
Er zijn div's die in hun attribuut data-num
hun volgnummer bevatten:
<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>
Zorg ervoor dat bij een klik op een willekeurige div zijn volgnummer aan het einde wordt geschreven.
Er is een knop. Zorg ervoor dat deze knop het aantal klikken erop bijhoudt door ze in een aangepast attribuut te schrijven. Laat bij een klik op een andere knop op het scherm worden weergegeven hoeveel klikken er op de eerste knop zijn gedaan.
Gegeven een invoerveld:
<input id="elem" data-length="5">
In dit invoerveld bevat het attribuut data-length
het aantal in te voeren tekens. Zorg ervoor dat bij verlies
van focus, als het aantal ingevoerde tekens
niet overeenkomt met het opgegeven aantal, een bericht
hierover wordt weergegeven.
Gegeven een invoerveld:
<input id="elem" data-min="5" data-max="10">
In dit invoerveld bevatten de attributen data-min en
data-max een bereik. Zorg
ervoor dat bij verlies van focus, als het aantal
ingevoerde tekens niet binnen dit bereik valt,
een bericht hierover wordt weergegeven.
