Javascript HTML元素的本地id-s

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

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

另一个解决方案是使用“name”属性。它不需要是唯一的——这很好。但同样，该标准只允许对一组受限的元素类型显示“name”属性。例如，“name”属性对于DIV元素无效

例如，我可以使用“class”属性。它似乎符合标准，但其含义不符合标准。“类”应用于其他目的，这可能会造成混淆

---

有人能推荐一些其他选项来实现HTLM元素的localid-s吗？

您可以使用HTML5

data-*

属性，这样您就可以给它们一个具有正确含义的自定义名称：

及

然后做一些类似的事情：

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

...

如果对所有ID和/或类（如

myWidgetName_98345699-

使用前缀，则发生冲突的可能性极低

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

---

jQuery确实有选择器可以搜索ID的一部分，所以使用像

container

这样的通用名称也是明智的选择。对ID的特定部分使用较长的字母数字组合也是明智的，通常，包括网页中的隐藏信息需要创造性的方法。例如：

• 在HTML元素属性（如id、class、rel和title）中存储信息，从而覆盖属性的原始意图
• 使用包含信息的
  或
  块，同时通过样式设置

  （style=“display:none；”）使这些块对用户不可见

• 向网页添加JavaScript代码，以定义映射到HTML ID元素的数据结构
• 向现有HTML元素添加您自己的属性（打破HTML标准本身，依靠HTML浏览器忽略任何语法错误）

上面的方法并不优雅，也不是很好的编码实践，但好消息是jQuery有一个功能，可以以干净、跨浏览器的方式简化数据与DOM元素的关联

使用自定义数据属性：

任何以“data-”开头的属性都将被视为私有数据的存储区域（私有的意思是最终用户看不到它-它不会影响布局或显示）

通过html定义自定义数据：

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

正在检索具有特定数据id的元素：

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

---

你关于使用类的声明似乎与正常使用非常相反。你可以很容易地设计一个带有唯一前缀的类系统，这样就不太可能与其他页面元素发生冲突。至于js，如果你总是只在你创建的主窗口小部件容器中搜索，它会使搜索与DOMI的其他部分完全隔离ou，这是我记忆中一直想要的东西。它几乎就像id应该是uid一样，让id免费供本地使用，允许我们做

\uid>\id

之类的事情。有趣的是：像Angular这样的现代框架，毫不犹豫地在元素上引入自定义属性，而不考虑标准。在本文中在这种情况下，我对标准遵从性的担忧看起来有点偏执：）好主意，谢谢！但如果可能的话，在HTML4标准的范围内找到一些解决方案会很好。如果这个问题没有出现，我会接受这个答案。我想你必须使用类或ID，我不知道还有其他解决方案。如果您需要添加更多数据，有一个jQuery插件：但它也可以使用类。@tbraun89因为jQuery创建了

data（）

方法，所以需要使用元数据插件已经非常过时了，但这只适用于HTML5

data-*

属性，jQuery元数据可以在没有HTML 5的情况下使用。哦，神奇的号码98345699会救我的！：）是的，它可以，但我正在寻找更优雅的东西……就优雅而言，你期待什么？你需要独特的功能。。。不太可能让它变得很漂亮，我只是觉得关于DOM和HTML4有一些我不知道的东西。。。因为这项任务相当常见，人们应该有一个简单的解决方案。现在我明白了，只有你提议的把戏。或者我可以转到HTML5…即使在HTML5中使用数据属性，您也需要使用相同的方法来命名属性

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