Native JS for Reading HTML5 Custom Data Attributes

Question

I have learned that HTML5 includes a means to set custom attributes on elements using the data- prefix. However I'm a bit scewered in terms of how to read the properties during a javascript code block. I guess it is my interpretation of how the DOMStringMap is working thats off.

Could someone simplify how to read the properties of the following sample html.

<span data-complex-key="howtoRead" data-id="anId">inner</span>

Trying following doesnt really work as expected

spanEl.dataset['id']                    // straight-forward and result is anId
spanEl.dataset['complex-key']           // undefined
spanEl.dataset['complex']['key']        // throws 'cannot read property of undefined'
spanEl.getAttribute('complex-key')      // there's a null however,
spanEl.getAttribute('data-complex-key') // this variant seems to work

Another thing that makes me wonder is, the CSS selectors seems to follow the excact same pattern as to which is i written in the DOM, so why is this not the case with reading from javascript.

For instance, this would match

 span[data-complex-key="howtoRead"] { color:green }

Appreciate the help, still getting more and more intreaged with the HTML5 Canvas, Video and local Data Storage :)

Answer 1

In vanilla-JS, assuming spanEl is a reference to the DOM node

spanEl.dataset.complexKey

will work using the camelCase notation (see http://jsbin.com/oduguw/3/edit ) when your data attribute contains hypens ( - ) and also

spanEl.getAttribute('data-complex-key')

will work fine as you already noticed. As a side note, in jQuery you can access to that data attribute with

$(spanEl).data("complex-key")

Answer 2

In Chrome, it seems to map the data keys in a not-so-straightforward way:

console.log(spanEl.dataset);​​​​​​​​​​​​​​
//shows:
//DOMStringMap
//  complexKey: "howtoRead"
//  id: "anId"

It converts "complex-key" to "complexKey".

While not being completely straightforward, this behavior is defined in the HTML5 spec here:

http://dev.w3.org/html5/spec//global-attributes.html#dom-dataset

Answer 3

Your first and last method are correct while not using any libraries. However a key with a minus sign is converted to Camel Case, so complex-key becomes complexKey:

spanEl.dataset['id']
spanEl.dataset['complexKey']
spanEl.getAttribute('data-complex-key')

However, only the last one works in IE up to 9. (I don't know about 10.) The data attributes are nothing else than normal attributes having a naming convention in this case.

Answer 4

 spanEl.dataSet["complexKey"]   

//Using jQuery you can try this

 $('span').data('complex-key')  // Will give you **howtoRead**

    $('span').data('id')  // Will give you **anId**