javascript - Local id-s for HTML elements - Stack Overflow

admin管理员组

文章数量:1401425

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?

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?

• javascript
• html
• dom

Share Improve this question Follow edited Mar 21, 2015 at 2:10 Pang 10.1k146146 gold badges8686 silver badges124124 bronze badges asked Nov 22, 2012 at 20:27 C-FC-F 1,7881818 silver badges2828 bronze badges 3

• your statement about using class seems very contrary to normal useage. You could easily devise a class system with a unique prefix that would be highly unlikely to collide with other page elements. As for js, if you always search only within the main widget container you create it keeps searches isolated from other parts of the DOM – charlietfl Commented Nov 22, 2012 at 20:34
• I totally hear you, and it's something I've wanted for as long as I can remember. It's almost as if id should have been uid, leaving id free for local use, allowing us to do things like #uid > ##id. – Dave Stewart Commented Jan 30, 2016 at 0:16
• Interesting thing: Modern frameworks, like Angular, do not hesitate to introduce custom attributes on elements, without thinking about standards. In this situation, my concern about standard pliance looks a bit paranoid :) – C-F Commented Feb 8, 2016 at 22:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

https://html.spec.whatwg/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;

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 mon 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

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"]');
   

本文标签： javascriptLocal ids for HTML elementsStack Overflow