data-id in html and dataset.id in javascript? Confused

[OM2]

I've got some code:

<a data-id="pagetwo" href="#">PAGE 2</a>

and then I've got some Javascript:

alert(e.target.dataset.id)

In the above case:

e.target.dataset.id is pagetwo

I don't understand
Is this a convention or something? i.e. data-id in HTML is target.dataset.id in Javascript?

Complete newbie to Javascript - so sorry if it's a dumb question

Thanks


OM

[aj_nsc]

Correct. The HTML5 data attribute JavaScript API places all HTML element data- attributes in an object named 'dataset' on the DOM element.

<a id="myelement" data-flora="plants"></a>
<div id="somediv" data-fauna="animals"></div>

//logs plants
console.log(document.getElementById('myelement').dataset.flora);

//logs animals
console.log(document.getElementById('somediv').dataset.fauna);

Might I suggest not using data-id? It can be reasonably easily confused with an element's id.

Further reading: http://html5doctor.com/html5-custom-data-attributes/

The dataset object is cross-browser supported, however, it's part of the HTML5 specification that is not yet finalized and thus, only the newest browsers will support the dataset object.

[OM2]

thanks for the. a bit more clued up now
that article is great - understand a lot better now
+ i understand that the use of 'id' is wrong (the original code was someone elses - who actually should have known better)

dataset - can i assume this is widely implemented in all browsers?
at the end of the article, the author mentions not to use because no browsers had implemented - but that was in 2010?

[aj_nsc]

Nope, not widely supported because legacy browsers are still in use. It's not supported in IE<10 (and I'm not even sure about 10). Nor is it implemented in Firefox 3.6 (the most popular legacy version of Firefox).

It's not widely implemented and you can't depend on it as a cross-browser solution.

[OM2]

hmm... i was using for mobile app/website development
does that change anything?
thanks

[Kor]

hmm... i was using for mobile app/website development
does that change anything?
thanks

It depends on what mobile, and on what type of layout engine / browser. Usually the mobiles' browsers do support most of the HTML5 features, but you have to verify that for each type of layout engines: Webkit (Safari, Chrome), Gecko(Moz), Presto (Opera), etc... and their versions.

[OM2]

It depends on what mobile, and on what type of layout engine / browser. Usually the mobiles' browsers do support most of the HTML5 features, but you have to verify that for each type of layout engines: Webkit (Safari, Chrome), Gecko(Moz), Presto (Opera), etc... and their versions.

guys: thanks for that. i've been developing in sencha. works on my desktop chrome browser. i'm now happy that i hadn't developed further - only to find last minute that i've got some damn unknown problem - that would be hard to track down

[OM2]

hmm... i just talked to someone else, they said dataset was quite widely available and gave me this link:

http://caniuse.com/dataset

any thoughts?

[aj_nsc]

Note: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property.

Something got lost in the translation, because, as I've said, the JavaScript 'dataset' object is NOT widely available. HOWEVER, you are still able to use the HTML5 data-whatever attribute format and access the content using the native DOM method getAttribute('data-whatever').

Looking closely at the link you just provided I can tell you that the dataset object is available in the following browsers:

Safari 5.1+
Chrome 7+
Firefox 6+
Opera 11.1+
iOS Safari 5+
Opera Mobile 12+
Android Browser 3+

In all other browsers, you must use the getAttribute() method to access the data- attribute on the HTML element.

EDIT: While that does appear to be pretty widely available, the chart shows 0&#37; support in any IE browser, modern or legacy to date.

[Kor]

HOWEVER, you are still able to use the HTML5 data-whatever attribute format and access the content using the native DOM method getAttribute('data-whatever')

Agree. Yet somehow I would opt rather for getAttributeNode() method, as it deals with the nodes directly, even if, as far as I could see, it is seldom used.

The problem is that getAttribute() searches for native HTML attributes, while getAttributeNode() acts like an XML method, and it will refer any kind of attributes, native or custom.