Home / Questions / 92311
Accepted
user10111
Asked: 2020-08-03 07:51:54 +0800 CST 2020-08-03 07:51:54 +0800 CST

'data-*' html attribute - Creation rules

  • 772

Can data attributes be created followed by a number, data-0 = "mexico"?

Or something like this:

data-data1 = "mexico"

The idea is to retrieve them through an iteration and thus save yourself from writing attribute by attribute.

javascript

2 Answers

  1. It is not necessary to use numbering to iterate over them, nor is it necessary to iterate attribute by attribute using their names. Recent versions of jQuery (if you're trying to do it using jQuery) allow you to get all attributes data-*by simply calling the method data()with no parameters:

    $(document).ready(function() {
    var atributos = $("#prueba").data();
    console.log(atributos);

    // Uno de ellos
    console.log(atributos.pais);

    // Para iterar sobre los atributos
    $.each(atributos, function(key, elem) {
        console.log(key + ' -> ' + elem);
    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="prueba" data-id="1" data-ciudad="Lima" data-pais="Peru">
    Prueba
</h1>

    With JavaScript you can use the element attribute dataset:

    document.addEventListener("DOMContentLoaded", function(event) { 
    var element = document.getElementById("prueba");
    var data = element.dataset;
    console.log(data);
 
    // Para iterar sobre los atributos
    for (key in data) {
        console.log(key + ' -> ' + data[key]);
    }
});
    <h1 id="prueba" data-id="1" data-ciudad="Lima" data-pais="Peru">
    Prueba
</h1>

    • 8
  2. Best Answer

    Answering your original question: Can you create the attributes data followed by a number, data-0 = "mexico"? , the answer can be found in the HTML5 specification for data-attributes (my translation):

    3.2.5.9 Embed non-visible custom data with attributesdata-*

    A custom data-attribute is an attribute outside of any namespace whose name begins with the string " data-", has at least one character after the hyphen, is XML-compliant , and does not contain any uppercase ASCII letters .

    So for the data-attribute name to be valid it must:

    1. start with data-.
    2. Have at least one character after the hyphen.
    3. Make it an XML-compatible name. For a name to be XML compatible it must:
      • Do not contain the character :.
      • The first three letters cannot be xml(in any variation of upper/lower case).
      • It must comply with XML defined names .
    4. Do not contain capital letters.

    Although according to the XML definition the first character of a name cannot be a number, this rule does not affect the data-attributes because the first character will actually be the "d" of "data-" and not the first character after the hyphen .

    Taking that into account, the attribute data-0is valid, as long asdata-data1 ; and in fact, they both pass the W3C HTML validator successfully .

    • 4