JavaScript
Gegevens attributen

Syntaxis

• var x = HTMLElement.dataset. *;
• HTMLElement.dataset. * = "Waarde";

Opmerkingen

Toegang tot gegevensattributen

Gebruik van de dataseteigenschap

De nieuwe eigenschap dataset geeft toegang (voor zowel lezen als schrijven) tot alle gegevensattributen data-* op elk element.

<p>Countries:</p>
<ul>
  <li id="C1" onclick="showDetails(this)" data-id="US" data-dial-code="1">USA</li>
  <li id="C2" onclick="showDetails(this)" data-id="CA" data-dial-code="1">Canada</li>
  <li id="C3" onclick="showDetails(this)" data-id="FF" data-dial-code="3">France</li>
</ul>
<button type="button" onclick="correctDetails()">Correct Country Details</button>
<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.dataset.id
            + "\r\nDial Code: " + item.dataset.dialCode;
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.dataset.id = "FR";
    item.dataset.dialCode = "33";
}
</script>

Opmerking: de eigenschap dataset wordt alleen ondersteund in moderne browsers en is iets langzamer dan de methoden getAttribute en setAttribute die door alle browsers worden ondersteund.

De methoden getAttribute & setAttribute gebruiken

Als u de oudere browsers vóór HTML5 wilt ondersteunen, kunt u de methoden getAttribute en setAttribute gebruiken die worden gebruikt om toegang te krijgen tot elk kenmerk, inclusief de gegevensattributen. De twee functies in het bovenstaande voorbeeld kunnen op deze manier worden geschreven:

<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.getAttribute("data-id")
            + "\r\nDial Code: " + item.getAttribute("data-dial-code");
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.setAttribute("id", "FR");
    item.setAttribute("data-dial-code", "33");
}
</script>