HTML元素的本地ID-s

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?

我正在开发一种HTML + JS控件,可以嵌入到各种网页中。我对这些页面一无所知(嗯,我可以,但我不想)。该控件由一个根元素(例如DIV)组成,该元素包含子元素的子树。在我的脚本中,我需要访问子元素。问题是:我如何标记这些子元素以区分它们?

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.

直接的解决方案是使用id-s。这里的问题是id在整个文档的范围内必须是唯一的,而且我对控件嵌入的文档一无所知。所以我无法保证我的身份的独特性。如果id-s不是唯一的,它将起作用(如果小心使用),但这不符合标准,所以我可以遇到一些新版本的浏览器的问题,例如。

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.

另一种解决方案是使用“name”属性。它不需要是独一无二的 - 这很好。但同样,该标准仅允许“name”属性存在于一组受限制的元素类型中。例如,“name”属性对DIV元素无效。

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.

例如,我可以使用“class”属性。这个标准似乎没问题,但是这个含义并不合适。 “类”应该用于其他目的,这可能会令人困惑。

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

任何人都可以建议一些其他选项来实现HTLM元素的本地id-s?

3 个解决方案

#1

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

您可以使用HTML5 data- *属性,以便为它们提供具有正确含义的自定义名称:

http://ejohn.org/blog/html-5-data-attributes/

and

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

And do something like:

做一些像:

<div data-localId="myID">
  ...
</div>

#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.

如果对所有ID和/或类(如myWidgetName_98345699)使用前缀,则碰撞的可能性极不可能。

<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

jQuery确实有选择器来搜索ID的一部分,所以使用像容器这样的通用名称也很聪明,也可以远离它。对ID的特定部分使用冗长的字母数字混合也很聪明

#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.

在HTML元素属性(如id,class,rel和title)中存储信息,从而覆盖属性原始意图。

Using <span> or <div> blocks that contain the information, while making such blocks invisible to the user through styling (style="display: none;").

使用包含信息的或

块,同时通过样式使这些块对用户不可见(style =“display:none;”)。

Adding JavaScript code to the web page to define data structures that map to HTML ID elements.

将JavaScript代码添加到网页以定义映射到HTML ID元素的数据结构。

Adding your own attributes to existing HTML elements (breaking the HTML standard itself, and relying on the HTML browser to ignore any syntax errors).

将您自己的属性添加到现有HTML元素(打破HTML标准本身,并依赖HTML浏览器忽略任何语法错误)。

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.

上面的方法并不优雅,也不是很好的编码实践,但好消息是jQuery有一个简化了以干净,跨浏览器方式将数据与DOM元素相关联的工具。

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.

任何以“data-”开头的属性都将被视为私有数据的存储区域(在最终用户无法看到它的情况下是私有的 - 它不会影响布局或呈现。

Defining custom data via html:

通过html定义自定义数据:
```
<div class="bar" id="baz" data-id="foo">  
  ...
</div>
```
Associating data-id to specific DOM elements (jQuery):

将data-id与特定DOM元素(jQuery)相关联:
```
$('#foo').data('id', 'baz');
```
Retrieving an element with specific data-id:

检索具有特定data-id的元素:
```
var $item = $('*[data-id="baz"]');
```

#1