#250 enhancement

Support for .dataset property and data-* attributes

Reported by arty | July 28th, 2008 @ 08:03 PM

Spec of HTML5 describes way to include hidden data in elements via data-* attributes, easily accesible as properties of .dataset property. There's no support for this in browsers, however it's easily emulated:

    getDataset: function(element) {
        if (element.dataset) return element.dataset;
        var match, dataset = {};    
            if (attr.localName.startsWith('data-')) 
                dataset[attr.localName.substring(5)] = attr.nodeValue; 
        return element.dataset = dataset;

I believe this may be inclided in core due to very small size and high convenience.

Comments and changes to this ticket

  • John-David Dalton

    John-David Dalton July 28th, 2008 @ 08:53 PM

    • State changed from “new” to “enhancement”

    Can you explain the guts of this method a bit more.

    why is there an need to iterate over all the elements attributes?

  • arty

    arty July 28th, 2008 @ 09:11 PM

    Yes, i think there's such need, as we can't rely on getters/setters yet. Here's simple example of what spec implies:

    <div id="test" data-name="some_internal_name" data-code="bla-bla"></div>
    console.log($('test').dataset.name); // "some_internal_name"
    console.log($('test').dataset.code); // "bla-bla"
    console.log($('test').dataset.unexistent); // undefined

    So dataset behaves like object, having properties/values filled with data from data-* attributes. Of course, there's another way: create wrapper for accessing these attributes by name, but it doesn't feel right for me, and declines too much from interface described in spec. I know it's optimization time for Prototype team, and tried to optimize method itself.

  • John-David Dalton

    John-David Dalton July 28th, 2008 @ 11:54 PM

    Ahh nice "localName" is a new one for me.

    Thanks I see what you are doing now :)

    I wonder if using

     var attributes = element.attributes;
     for(var i=0, attr; attr = attributes[i]; i++) {


     var attributes = element.attributes, length = attributes.length, attr;
     while (length--) { attr = attributes[length];...

    might be faster since it doesn't have to iterate over the list to create an array.

  • arty

    arty July 29th, 2008 @ 09:40 AM

    Yeah, it might be faster, I'm just kinda used to these nice iterators : )

    So here we go:

        getDataset: function(element) {
            if (element.dataset) return element.dataset;
            var match, attr, dataset = {}, 
                attributes = element.attributes, 
                index = attributes.length;
            while (index--) { 
                attr = attributes[index]; 
                if (attr.localName.startsWith('data-')) 
                dataset[attr.localName.substring(5)] = attr.nodeValue; 
            return element.dataset = dataset;
  • Tobie Langel

    Tobie Langel July 30th, 2008 @ 01:58 AM

    If anything, I'd be more in favor of Element#getData and Element#setData. The problem with your current proposal is that you cannot set the attributes that way.

    >>> element.getDataset().foo = "foo";
    >>> element.cloneNode(true).getDataset().foo
  • John-David Dalton

    John-David Dalton July 30th, 2008 @ 06:11 AM

    He could set the data in an array like we do with the eventID:

      function getEventID(element) {
        // Event ID is stored as the 0th index in a one-item array so that it
        // won't get copied to a new node when cloneNode is called.
        if (element === window) return 1;
        if (element._prototypeEventID) return element._prototypeEventID[0];
        return (element._prototypeEventID = [arguments.callee.id++])[0];
  • arty

    arty July 30th, 2008 @ 10:57 AM

    Actully I thought of this only as of way to embed some data to HTML. Idea that it can be used by JS developers to put data to element with javascript (instead of element._kindaPrivateProperty) didn't came to my head. Now I agree that most probably it would be used that way.

    But one thing which stops me is my dislike for quoted strings as keys (yes, I'm not great fan of Hash#set too). At the moment I'd better live without dataset then use such syntax for it. Need to think more about it.

  • Juriy Zaytsev

    Juriy Zaytsev August 4th, 2008 @ 11:51 PM

    Besides what Tobie said, I see another problem here:

    Manually modifying attributes would not reflect changes in element's dataset (as I assume it should behave in HTML5).

    So, i.e.:

    myElement.getDataset(); // { foo: 'bar' };
    // explicitly add attribute
    myElement.writeAttribute({ 'data-baz': 'baz' });
    // nothing was changed
    myElement.getDataset(); // { foo: 'bar' }

    The method would need to collect proper attributes every time it is run (rather than precaching them as a custom property) to work around this.

  • arty

    arty August 5th, 2008 @ 09:44 AM

    Yeah, I get it. It was my fault that I didn't think of people willing to dynamically modify these attributes. I suggested only one-way data transfer.

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:11 AM

    • Tag changed from element to element, section:dom

    [not-tagged:"dom" tagged:"section:dom" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:12 AM

    • Tag changed from element, section:dom to section:dom

    [not-tagged:"element" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    [responsible:none bulk edit command]

  • Jason Westbrook

    Jason Westbrook December 21st, 2012 @ 11:32 PM

    • Importance changed from “” to “”

    This pull request has a set/get html5data methods that handle the attributes and the dataset properties correctly


  • Robert756

    Robert756 August 4th, 2018 @ 01:10 PM

    with astounding energy effectiveness, https://www.tumblr.com/ superior racking space and best dishwasher also unique cleaning.When it's not put best rated dishwashers away behind a furnishings door, it's one of the quietest dishwasher reviews makers This dishwashing machine likewise features a top-mounted flatware tray, nice big takes official website care of for the two baskets and also, uniquely, an extra.

  • ravi

    ravi August 17th, 2018 @ 11:13 AM

    thanks for sharing this information,very useful post.
    Samsung refrigerator service centre in hyderabad

  • Kellie924

    Kellie924 August 21st, 2018 @ 01:52 PM

    It has the tendency to do a little bit much better, Angelfire great look for linked info from IMDB AndroidTVGroup specifically the essential day-to-day solutions How to setup your Android TV Box? certainly not continuously stand over Android TV Box many standard Android boxes has actually Android TV Box media option for fast satisfaction at any moment. read full article when as compared to its competitors.

  • Anne Manike

    Anne Manike April 13th, 2019 @ 04:25 PM

    Best Android Game play Mincraft. Download Mincraft Android for free. Get Aptoide Mincraft Now.Cross-platform play for up to eight players across Windows 10 PCs, Android devices, iOS phones and tablets, Xbox One, and virtual reality platforms.
    Aptoide Minecraft | Minecraft Android | Minecraft apk

  • Anne Manike

    Anne Manike April 13th, 2019 @ 04:27 PM

    Download Latest version of Clean Master apk and remove unwanted files and apps for free and get rid of virus and malware with Clean Master App for Android. Clean Master Android.
    Clean Master apk | Filelinked | Filelinked apk

  • Aptoide Minecraft
  • Aptoide Minecraft
  • Aptoide Minecraft
  • clifford

    clifford June 17th, 2019 @ 09:19 AM

    Nice to see this here. You explained in a nice way. Thanks for sharing this to us. I like to spend time with the pets. Would you like to know more about the pets here you will get complete details bout the pets. https://catsfud.com/can-cats-eat-spinach/

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins