6

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

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

另一种解决方案是使用“名称”属性。它不需要是唯一的——这很好。但同样，该标准只允许有限的元素类型集存在“名称”属性。例如，“名称”属性对 DIV 元素无效。

例如，我可以使用“类”属性。标准上好像没问题，意思上就不行了。“类”应该用于其他目的，这可能会造成混淆。

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

4

3 回答 3

6

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

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>
于 2012-11-22T20:32:45.323 回答
2

如果您对所有 ID 和/或类使用前缀，例如myWidgetName_98345699-发生冲突的可能性极小。

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

jQuery 确实有会搜索 ID 的一部分的选择器，因此使用类似的常用名称container也可以避免使用。对 ID 的特定部分使用较长的字母数字组合也很聪明

于 2012-11-22T20:51:05.860 回答
0

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

  • 在 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"]');
于 2012-11-22T21:49:06.447 回答