Opinion: in HTML, Possible Duplicate IDs or Non-Standard Attributes?

Question

It seems pretty common to want to let your javascript know a particular dom node corresponds to a record in the database. So, how do you do it?

One way I've seen that's pretty common is to use a class for the type and an id for the id:

<div class="thing" id="5">
<script> myThing = select(".thing#5") </script>

There's a slight html standards issue with this though -- if you have more than one type of record on the page, you may end up duplicating IDs. But that doesn't do anything bad, does it?

An alternative is to use data attributes:

<div data-thing-id="5">
<script> myThing = select("[data-thing-id=5]") </script>

This gets around the duplicate IDs problem, but it does mean you have to deal with attributes instead of IDs, which is sometimes more difficult. What do you guys think?

Answer 1

Note that an ID cannot start with a digit, so:

<div class="thing" id="5">

is invalid HTML. See What are valid values for the id attribute in HTML?

In your case, I would use ID's like thing5 or thing.5.

Answer 2

<div class="thing" id="myapp-thing-5"/>

// Get thing on the page for a particular ID
var myThing = select("#myapp-thing-5");

// Get ID for the first thing on the page
var thing_id = /myapp-thing-(\d+)/.exec ($('.thing')[0].id)[1];