HTML元素的本地ID-s

Question

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

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

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

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

是否有人可以为HTLM元素提供其他选项来实现本地 id-s？

Answer 1

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

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

和

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

做类似的事情：

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

Answer 2

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

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

jQuery确实有选择器可以搜索ID的一部分，因此使用像container这样的常用名称也很聪明。对ID的特定部分使用长字母数字混合也很聪明

Answer 3

通常，在网页中包含隐藏信息需要创造性方法。例如：

• 在HTML元素属性（如id，class，rel和title）中存储信息，从而覆盖属性原始意图。
• 使用包含该信息的<span>或<div>块，同时通过样式(style="display: none;")使用户无法看到此类块。
• 将JavaScript代码添加到网页以定义映射到HTML ID元素的数据结构。
• 将您自己的属性添加到现有HTML元素中（打破HTML标准本身，并依赖HTML浏览器忽略任何语法错误）。

上述方法并不优雅，并且不是良好的编码实践，但好消息是jQuery具有简化以干净，跨浏览器方式将数据与DOM元素相关联的工具。

使用自定义数据属性：

  

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

1. 通过html定义自定义数据：

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

2. 将data-id与特定DOM元素（jQuery）相关联：

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

3. 检索具有特定数据ID的元素：

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