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")