Are data attributes good identifiers of certain blocks of HTML code?

Question

I have a complex environment which is mostly oriented around / ends up spitting out blocks of HTML, which make up the entire page.

Now, I need a way to "point and click" identify any block on my page from the front-end. At the user's command, they should be able to, when an element is clicked, pull an unique identifier for it and based on that, show more information.

A block could be as simple as:

<h1 class="beautiful-title">Test Title</h1>

And then, another one:

<p class="beautiful-paragraph">Test paragraph, has some nice CSS to it. </p>

And assume, for every block that I want to be identified, I add the data-identifier attribute, as such, my first block is now:

<h1 class="beautiful-title" data-identifier="block-432">Test Title</h1>

And on click, the browser will pull up block-432 for me, which I will then use to request a REST API with information for this block, for example

mylink.com/rest/block_data&block_id=block-432

Which would return a JSON response with data (titles, information, videos, etc.) about the said block in the success response of my call.

My biggest concerns:

1. There will be times when I have about 20-30 blocks on a page. It is crucial and necessary that when the user clicks a special button, all of the "clickable with information" blocks are shown with a green border, as in "you can click here to get more info". Thing is, if I were to search the entire DOM for all of the data-identifier attribute, it will 100% be slow.
2. There will be no pre-loading, so, there won't be any data being pulled for every block there is on the page, this has to happen in a REST / AJAX call, but should I consider pre-loading them?

So, again, are data attributes the way to go here?

• HorusKol: What's wrong with using the id attribute? That is it's purpose
• coolpasta: @HorusKol That's the thing. I will have multiple of these things. A class also doesn't work because I must pull an unique ID out of this. What I could do is probably search every element by class, then based on what is clicked, pull its data-identifier. Thoughts?
• HorusKol: So... an element might have multiple identifiers? Why?
• HorusKol: As for speed - make sure you're not prematurely optimising - are you actually seeing slow behavior, or just worried about it?

Answer 1

You're associating extra data (here, an external resource ID) with a DOM element. Using data attributes is a perfectly fine approach of doing that. This is probably the best approach, although there are alternatives:

• use <meta> tags within the element.
• use <script> tags (possibly with a custom type) to store additional structured data.

Both of these alternatives are usually more complex.

A third alternative is to add an onclick-handler or javascript-URL directly to the element that already knows the correct ID:

<div onclick="loadResource('foo-123')"> ... </div>

This isn't automatically bad, but it's less flexible: the resource ID can now only be used to load the resource, not for any other uses.

As you have correctly determined, the ID attribute is not appropriate here. The ID identifies a DOM fragment. It can e.g. be used to link to that element. An ID must not be reused within a DOM tree. For all of these reasons, the standard ID element is unsuitable or misleading for representing external resource IDs.

So to summarize, a data-identifier attribute is likely to be the best solution.

Now on to your concerns:

• How can you style these elements? You can of course add a CSS selector [data-identifier]. You are afraid this might be slow, but this is really unlikely to matter.

  Alternatively, stop using the data attributes for styling and add another class, so that your selector would simply be .clickable or something like that. You can use this selector both for styling and for finding relevant elements upon page load to install event handlers.

• Should you use pre-loading? This depends on the kind and size of data. If the data needs to be super up to date or if the data is very large it might be better to defer loading until the user requests it. Otherwise, showing data that is already there is a lot faster than waiting for the data to arrive. If your web app is intended for mobile or for consumers, consider using your browser's developer tools to simulate a poor network connection.

• coolpasta: Thank you. What I did was use data attributes, then registerd the identifier I was pulling from clicking that said element and passing it to a GET REST request to retrieve data about the said element. No in-line JS on the mark-up though. Just created a click event listener on every block of the same type.