element.dataset in Internet Explorer

Question

I need a way to list the data-* attributes of an element. I would use Object.keys(element.dataset) but IE 9.0 doesn\'t have dataset s

Answer 1

I needed this but also needed access to the keys, so I wrote a function based on the solution given by Andreas:

Element.prototype.dataset_simulated = function(){
  var attributes = this.attributes;
  var simulatedDataset = {};

  for (var i = attributes.length; i--; ){
    if (/^data-.*/.test(attributes[i].name)) {
      var key = attributes[i].name.replace('data-', '');
      var value = this.getAttribute(attributes[i].name);
      simulatedDataset[key] = value;
    }
  }
  return simulatedDataset;
};

And to use it, instead of doing element.dataset, you do element.dataset_simulated().

and here's the fiddle

Edit:

It appears that IE<8 also has no support for Element.prototype, so this can simply be a function with usage like dataset_simulated(elem):

function dataset_simulated(elem){
  var attributes = elem.attributes;
  var simulatedDataset = {};

  for (var i = attributes.length; i--; ){
    if (/^data-.*/.test(attributes[i].name)) {
      var key = attributes[i].name.replace('data-', '');
      var value = elem.getAttribute(attributes[i].name);
      simulatedDataset[key] = value;
    }
  }
  return simulatedDataset;
};

Answer 2

If you are using jQuery, you can access data-* attributes through $.data() method: http://api.jquery.com/data/

Answer 3

You could also try the following method:

[dom_element].getAttribute('[your data-* attribute name]');

Answer 4

element.attributes will give you a NamedNodeList with all attributes of the element.
Just check the attribute names if they start with data-

var attributes = element.attributes,
    i = attributes.length;

for (; i--; ){
    if (/^data-.*/.test(attributes[i].name)) {
        console.log(attributes[i].name);
    }
}

​Example