give prototype the .data() method like jQuery

prototype_extension_data.js

var PrototypeExtensions = {
  data: function(elem, key, val) {
    var DATA_REGEX = /data-(\w+)/;
    var ii = 0;
    var nattr = elem.attributes.length;
    if (key && val) {
      elem.setAttribute('data-' + key, val);
    } 
    else {
      for (; ii < nattr; ++ii ) {
        var attr = elem.attributes[ii];
        if (attr && attr.name) {
          var m = attr.name.match(DATA_REGEX);
          if (m && m.length > 1) {
            var datakey = m[1];
            if (datakey === key) {
              return attr.value;
            }
          }
        }
      }
    }
  }
};

Element.addMethods(PrototypeExtensions);

the_html.html

<div 
  data-param1='the value for param1' 
  data-otherstuff='other stuff value' 
  id='dom_with_data'>
    This dom element had data
</div>

using_it_in_javascript.js

var val1 = $('dom_with_data').data('param1');
console.log(val1);

// >> the value for param1

I have two improvements. The method does not return anything if the data attribute is not set. so a return at the end of the method might be a good idea, just for consistency.

And the regex is too strict. you can use everything with is "xml compatible" http://www.w3.org/TR/xml/#NT-Nmtoken ... I just googled it, because I want to use -, so the hyphen should be added at least.

Thank you very much for this implementation!

var PrototypeExtensions = {
    data: function (elem, key, val) {
        var DATA_REGEX = /data-([\w-]+)/;
        var ii = 0;
        var nattr = elem.attributes.length;
        if (key && val) {
            elem.setAttribute('data-' + key, val);
        } else {
            for (; ii < nattr; ++ii) {
                var attr = elem.attributes[ii];
                if (attr && attr.name) {
                    var m = attr.name.match(DATA_REGEX);
                    if (m && m.length > 1) {
                        var datakey = m[1];
                        if (datakey === key) {
                            return attr.value;
                        }
                    }
                }
            }
        }
        return null;
    }
};

Element.addMethods(PrototypeExtensions);

Just an observation, the jQuery data() functio returns an array of all data attributes if no key is specified, am I wrong or does the above only return null if there's no key set?

My suggestion :

var PrototypeExtensions = {
    data: function (elem, key, val) {
        var DATA_REGEX = /data-([\w-]+)/;
        var ii = 0;
        var nattr = elem.attributes.length;
        var all = [];
        if (key && val) {
            elem.setAttribute('data-' + key, val);
        } else {
            for (; ii < nattr; ++ii) {
                var attr = elem.attributes[ii];
                if (attr && attr.name) {
                    var m = attr.name.match(DATA_REGEX);
                    if (m && m.length > 1) {
                        var datakey = m[1];
                        if (key && datakey === key) {
                            return attr.value;
                        } else {
                            all[key] = attr.value;
                        }
                    }
                }
            }
        }
        if ( key ) {
            return null;
        } else {
            return all;
        }
    }
};

Element.addMethods(PrototypeExtensions);

Disclaimer : I wrote this suggestion in like 2 minutes in BBcode, I didn't fiddle it or otherwise check if the JS is even valid! But you get my gist right?