Local id-s for HTML elements

Question

I am developing a kind of HTML+JS control which can be embedded into various web pages. I know nothing about those pages (well, I could, but I don't want to). The control consists of one root element (e.g. DIV) which contains a subtree of child elements. In my script, I need to access the child elements. The question is: how can I mark those child elements to distinguish them?

The straightforward solution is using id-s. The problem here is that the id must be unique in the scope of the entire document, and I know nothing about the document my control will be embedded into. So I can't guarantee the uniqueness of my id-s. If the id-s are not unique, it will work (if used with care), but this does not conform with the standard, so I can meet problems with some new versions of the browsers, for example.

Another solution is to use the "name" attribute. It's not required to be unique -- that's good. But again, the standard allows the presence of "name" attribute only for a restricted set of element types. For example, the "name" attribute is invalid for DIV elements.

I could use, for example, the "class" attribute. It seems to be OK with the standards, but it's not OK with the meaning. "class" should be used for other purposes, and this may be confusing.

Can anybody suggest some other options to implement local id-s for HTLM elements?

Answer 1

You could use the HTML5 data-* attributes so you can give them a custom name with the right meaning:

https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Do something like:

<div id="element-id" data-local-id="id-value">
  ...
</div>

and get the value in JavaScript with:

const el = document.getElementById('element-id');
const { localId } = el.dataset;

Answer 2

If you use a prefix to all of your ID's and or classes such as myWidgetName_98345699- the likelihood of collisions is highly improbable.

<div id="myWidgetName_98345699-container" class="myWidgetName_98345699-container">

jQuery does have selectors that will search for part of an ID, so using common names like container would be smart to stay away from as well. Using a longish alphanumeric mix for the specific part of the ID would be smart also

Answer 3

Typically, including hidden information within the web page required creative approaches. For example:

• Storing information within HTML element attributes such as id, class, rel, and title, thus overriding the attributes original intent.
• Using <span> or <div> blocks that contain the information, while making such blocks invisible to the user through styling (style="display: none;").
• Adding JavaScript code to the web page to define data structures that map to HTML ID elements.
• Adding your own attributes to existing HTML elements (breaking the HTML standard itself, and relying on the HTML browser to ignore any syntax errors).

The approaches above are not elegant and are not good coding practice, but the good news is that jQuery has a facility that simplifies associating data to DOM elements in a clean, cross-browser manner.

Use the custom data attributes:

Any attribute that starts with "data-" will be treated as a storage area for private data (private in the sense that the end user can't see it - it doesn't affect layout or presentation.

1. Defining custom data via html:

   <div class="bar" id="baz" data-id="foo">  
     ...
   </div>
   

2. Associating data-id to specific DOM elements (jQuery):

   $('#foo').data('id', 'baz');
   

3. Retrieving an element with specific data-id:

   var $item = $('*[data-id="baz"]');