www.webdeveloper.com
Results 1 to 10 of 10

Thread: data-id in html and dataset.id in javascript? Confused

  1. #1
    Join Date
    Apr 2005
    Posts
    493

    data-id in html and dataset.id in javascript? Confused

    I've got some code:

    Code:
    <a data-id="pagetwo" href="#">PAGE 2</a>
    and then I've got some Javascript:

    Code:
    alert(e.target.dataset.id)
    In the above case:

    e.target.dataset.id is pagetwo

    I don't understand
    Is this a convention or something? i.e. data-id in HTML is target.dataset.id in Javascript?

    Complete newbie to Javascript - so sorry if it's a dumb question

    Thanks


    OM

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Correct. The HTML5 data attribute JavaScript API places all HTML element data- attributes in an object named 'dataset' on the DOM element.

    HTML Code:
    <a id="myelement" data-flora="plants"></a>
    <div id="somediv" data-fauna="animals"></div>
    Code:
    //logs plants
    console.log(document.getElementById('myelement').dataset.flora);
    
    //logs animals
    console.log(document.getElementById('somediv').dataset.fauna);

    Might I suggest not using data-id? It can be reasonably easily confused with an element's id.

    Further reading: http://html5doctor.com/html5-custom-data-attributes/

    The dataset object is cross-browser supported, however, it's part of the HTML5 specification that is not yet finalized and thus, only the newest browsers will support the dataset object.

  3. #3
    Join Date
    Apr 2005
    Posts
    493
    thanks for the. a bit more clued up now
    that article is great - understand a lot better now
    + i understand that the use of 'id' is wrong (the original code was someone elses - who actually should have known better)

    dataset - can i assume this is widely implemented in all browsers?
    at the end of the article, the author mentions not to use because no browsers had implemented - but that was in 2010?

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Nope, not widely supported because legacy browsers are still in use. It's not supported in IE<10 (and I'm not even sure about 10). Nor is it implemented in Firefox 3.6 (the most popular legacy version of Firefox).

    It's not widely implemented and you can't depend on it as a cross-browser solution.

  5. #5
    Join Date
    Apr 2005
    Posts
    493
    hmm... i was using for mobile app/website development
    does that change anything?
    thanks

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by OM2 View Post
    hmm... i was using for mobile app/website development
    does that change anything?
    thanks
    It depends on what mobile, and on what type of layout engine / browser. Usually the mobiles' browsers do support most of the HTML5 features, but you have to verify that for each type of layout engines: Webkit (Safari, Chrome), Gecko(Moz), Presto (Opera), etc... and their versions.

  7. #7
    Join Date
    Apr 2005
    Posts
    493
    Quote Originally Posted by Kor View Post
    It depends on what mobile, and on what type of layout engine / browser. Usually the mobiles' browsers do support most of the HTML5 features, but you have to verify that for each type of layout engines: Webkit (Safari, Chrome), Gecko(Moz), Presto (Opera), etc... and their versions.
    guys: thanks for that. i've been developing in sencha. works on my desktop chrome browser. i'm now happy that i hadn't developed further - only to find last minute that i've got some damn unknown problem - that would be hard to track down

  8. #8
    Join Date
    Apr 2005
    Posts
    493
    hmm... i just talked to someone else, they said dataset was quite widely available and gave me this link:

    http://caniuse.com/dataset

    any thoughts?

  9. #9
    Join Date
    Dec 2005
    Posts
    2,984
    Note: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property.
    Something got lost in the translation, because, as I've said, the JavaScript 'dataset' object is NOT widely available. HOWEVER, you are still able to use the HTML5 data-whatever attribute format and access the content using the native DOM method getAttribute('data-whatever').

    Looking closely at the link you just provided I can tell you that the dataset object is available in the following browsers:

    Safari 5.1+
    Chrome 7+
    Firefox 6+
    Opera 11.1+
    iOS Safari 5+
    Opera Mobile 12+
    Android Browser 3+

    In all other browsers, you must use the getAttribute() method to access the data- attribute on the HTML element.

    EDIT: While that does appear to be pretty widely available, the chart shows 0&#37; support in any IE browser, modern or legacy to date.

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by aj_nsc View Post
    HOWEVER, you are still able to use the HTML5 data-whatever attribute format and access the content using the native DOM method getAttribute('data-whatever')
    Agree. Yet somehow I would opt rather for getAttributeNode() method, as it deals with the nodes directly, even if, as far as I could see, it is seldom used.

    The problem is that getAttribute() searches for native HTML attributes, while getAttributeNode() acts like an XML method, and it will refer any kind of attributes, native or custom.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles