HTML元素的唯一标识符

Question

除了ID外，如果您想要一个HTML元素（比如div）的唯一标识符，我浏览了DOM，试图找到每个元素都独特的内容（例如数字或字符串），但是DOM很大，我无法在互联网上找到它。

是否有一个DOM属性只对该元素唯一？（除了ID以外，并且您没有具体说明，但它是在构建DOM时出现的。)

- Omar Abid

---

值得一提的是，IE 提供了一个 uniqueID 属性（http://msdn.microsoft.com/en-us/library/ms534704\(VS.85\).aspx），用于 DOM 对象，当访问该属性时，会为该元素生成一个唯一标识符。这不是规范的一部分，并且在其他浏览器中无法帮助您。 - Andy E

我创建了一个gist，其中包含一个shim，将IE的uniqueID功能添加到其他浏览器中。 - Renaat De Muynck

Answer 1

根据目的，这里有两个建议。

如果您不需要将id作为某种字符串表达，可以保存标准的DOM引用。

如果您因某些原因需要将其表示为字符串，则需要自行分配唯一的id。

var getId = (function () {
  var incrementingId = 0;
  return function(element) {
    if (!element.id) {
      element.id = "id_" + incrementingId++;
      // Possibly add a check if this ID really is unique
    }
    return element.id;
  };
}());

- RoToRa

---

由于您正在使用jQuery，我应让您了解它的data函数，该函数可使您将任何类型的信息分配给元素：http://api.jquery.com/data/ 实际上，jQuery本身使用唯一的ID来实现此功能，但我不确定是否有可靠的方式可以访问该ID。 - RoToRa

Answer 2

我能想到的唯一另一个标识符是元素在文档中的XPath。

例如，此页面标题链接的XPath为：

/html/body/div[3]/div[2]/div/h1/a

但就像Pekka已经说过的那样, 这取决于你想要做什么。我认为尽管现在JavaScript引擎中提供了XPath，但你不会轻易地从DOM中获取XPath。

- Gordon

---

@Andy Xpath在现代浏览器中可用。我只是认为目前还没有一种通过某种本地函数获取节点XPath的方法。至少我不知道有这样的方法。 - Gordon

@AndyE 我认为现在是它成为W3C推荐的时候了，你觉得呢？它对于操作DOM非常有用。 - risto

@risto 我认为主要问题在于 DOM 很少从根到目标元素是完全静态和可预测的。对 DOM 的任何更改都会使之前获取的 xpath 无用，因此最好只依赖 class 名称、唯一 ID 或使用相对于具有这些属性的元素的选择器。 - Andy E

@AndyE XPath在端到端测试中非常有用，您可以知道何时以及如何操作DOM。不必依赖像Selenium这样的IDE会很好。 - risto

Answer 3

Internet Explorer 为每个元素都有一个“uniqueID”属性。问题在于其他浏览器不支持该属性。

Translated: Internet Explorer 为每个元素都有一个“uniqueID”属性。问题在于其他浏览器不支持该属性。

- DonO

Answer 4

你可以使用一个库或自己创建一个唯一标识符。jQuery 有 .data()：

存储与匹配元素相关的任意数据，或返回匹配元素集合中第一个元素在命名数据存储中的值。

- risto

Answer 5

我遇到了相同的情况，当我在Chrome开发者工具检查器中看一些DOM元素时，我注意到它们似乎都有一个类似于jQuery11230892710877873282的属性被赋予了一个唯一的数字。

很明显，“jQuery”后面的数字每次加载页面时都不同。我的猜测是，每次尝试访问或操作任何DOM元素时，jQuery都会在内部生成这个数字。

我稍微尝试了一下，看起来从未被jQuery访问/操作的元素可能没有此属性，但是一旦做了像$(elem)这样的事情，该属性就会出现。所以，由于我们同时使用了jQuery和Lodash，我设计了以下函数，无论元素实际上是否具有DOM id属性，都可以返回一个唯一的ID。

_.reduce(
    $(elem), 
    function(result, value, key) { 
        if(_.startsWith(key, 'jQuery')) 
            return value;
        }, 
    0)

- AsGoodAsItGets

---

我发现这是jQuery的expando属性，更多信息请参见此处： https://dev59.com/g1HTa4cB1Zd3GeqPOhvW - AsGoodAsItGets

Answer 6

有一个 name 属性可以通过 document.getElementByName 调用。

我认为没有其他唯一标识符存在，即使你可以通过将属性（如 title）设置为唯一值来模拟一个，然后查询该属性。但是那样很不好。

- Pekka

---

寻找类似于原型中identify函数的解决方案。不幸的是，我正在使用jQuery。我认为最好通过创建自己的识别函数来实现。 - Omar Abid

name 不是非常独特的。多个元素可以具有相同的名称。不存在 document.getElementByName，但存在 document.getElementsByName，其中 Elements 是复数。 - Quentin