Storing object ID in HTML document: id vs data-id vs?

javascript html rest dom

10,599

Solution 1

An ID is intended to uniquely identify an element, so if you have a case where you want to identify two or more elements by some common identifier, you can use ID but it may not be the best option in your case.

You can use IDs like:

<div id="d0">Original Div</div>
<div id="d0-0">Copy of original div</div>
<div id="d1">Another original Div</div>
<div id="d1-0">Another copy of original div</div>
<div id="d1-1">Another copy of original div</div>

and get all the d1 elements using:

document.querySelectorAll('[id^=d1]');

or just d1 divs:

document.querySelectorAll('div[id^=d1]')

You could also use a class:

<div id="d0" class="d0">Original Div</div>
<div id="..." class="d0">Copy of original div</div>
<div id="d1" class="d1">Another original Div</div>
<div id="..." class="d1">Another copy of original div</div>
<div id="..." class="d1">Another copy of original div</div>

and:

document.querySelectorAll('.d1')

Or use data- attributes the same way. Whatever suits.

You can also have a kind of MVC architecture where an object stores element relationships through references based on ID or whatever. Just think outside the box a bit.

Solution 2

The purpose why data-selectors where introduces is because the users neednt want to use class or anyother attributes to store value.Kindly use data-selectors itself. In order to make it easy to access them use attributes selector i.e. [attribute='value']. PFB the fiddle for the same and also the example

jsfiddle

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-git2.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body onload="call()">
  <div id="1" data-check='1'></div>
  <div id="2" data-check='1'>sdf</div>
  <div data-check='1'>sdf</div>
  <div data-check='1'>sdf</div>
  <div data-check='1'>sdf</div>
</body>
</html>

function call()
{

$("#1").html($('[data-check="1"]').length);

  $("#2").html( document.querySelectorAll('[data-check="1"]').length);

}

Output: 5 5 sdf sdf sdf

Solution 3

@RobG is right by using 'class' you can get array of elements in JavaScript as-

 var divs=document.getElelementsByClassName("className");
 \\And you can loop through it(`divs[i]`).

AND according to @RobG and @Barmar data-* attribute is also a good option.

But here is some point(just point, not negative or positive, its totally depends on your application need) I want to discuss:

1] data-* element is HTML5's new attribute. Documentation

2] To retrieve elements in javascript, You need to use jQuery or more bit of JavaScript, coz all direct function available have specific browser support:

Like document.querySelector("CSS selector"); IE8+

document.getElementsByClassName("className"). IE9+

document.querySelectorAll("CSS selector"); etc.

So, basically for this point you need to choose according to your app need and browser compatibility.

3] Performance issue is also there on selecting by data-* attribute... Source

But, generally and if we go for latest application and selecting HTML5, data-* attribute + jQuery is a good option.

10,599

Author by

firedev

Full-stack designer. Specializing in crafting components systems tailored to use cases on hand. Carefully stitching together back and front ends for improved user experience.

Updated on August 21, 2022

Comments

firedev over 1 year
I would like to have an opinion on storing RESTful object IDs in document for accessing it later from JavaScript.

Theoretically speaking using id for addressing elements in HTML doesn't cut it anymore. Same element can be repeated twice on the page say in "Recent" and "Most Popular" queries which breaks the main point of using id.

HAML even has this nice syntax sugar:
```
%div[object]
```
becomes:
```
<div class="object" id="object_1">
```
But like I said, seems that it is not a good approach. So I am wondering what is the best way to store objects id in DOM?

Is this the current proper approach?
```
<div data-id="object_1">
```
firedev over 9 years

I don't think I can use different IDs for copies of the object, they are rendered using the same partial so I am just thinking of jumping the id ship and use data-id from now on. However it is possible to have multiple id on the page without much issues, this makes HTML not valid.
firedev over 9 years

As far as I concerned I never use plain JavaScript, so it will be $('[data-id="object_1"]') or something. Plus as a side effect bonus, the object representation will be updated everywhere it appears on the page. Yes that worsens performance a tiny bit, but again I am not building anything gigantic.
Adarsh Rajput over 9 years

@Nick You are right... :) having separate attribute for identification will be good for coding, coz class is for css selectors. That's why I said its totally depends on you, your app and your way of coding. I answered coz it may help someone else who don't want to use jQuery or more concern about performance or HTML4 validation etc.
RobG over 9 years

Multiple IDs are only an issue if you need to use them for DOM or CSS. If that's not an issue, then likely you don't need them at all (on those elements).
RobG over 9 years

There is getElementsByClassName (though IE9+), querySelectorAll is supported by IE8+ for CSS2 selectors like .class, and there are many libraries that implement CSS selectors, not just jQuery.