DOM 元素/节点的唯一标识符是啥

Posted 2023-03-28

【中文标题】DOM 元素/节点的唯一标识符是啥

【英文标题】：What is the unique identifier for a DOM element/nodeDOM 元素/节点的唯一标识符是什么

【发布时间】：2010-10-27 06:37:05

【问题描述】：

我正在使用 javascript DOM 遍历 html 文档。我想制作一个所有节点/元素及其值的列表（实际上是一个数组）。我找到了一个用于遍历 DOM 的脚本，但是如何将每个节点值存储在一个数组中。我似乎找不到节点的唯一标识符。有人有任何指示吗？我在想xpath 什么的。

将节点的xpath 视为唯一标识符是否是个好主意。如果是这样，我如何在遍历 DOM 时获取元素的xpath？

【问题讨论】：

您是否考虑过所有元素和值的列表是 DOM？

将元素放入数组后，您的计划是什么？如果是遍历数组，那么只遍历 DOM 会更容易。

Related.

Related.

Related.

【参考方案1】：

作为在 C 和 C++ 世界中出生和长大的程序员，我对这类问题的第一个答案是“将他们的地址存储在数组中！”。但是经过几年在网络上的处理方式，我可以给出正确的答案：

在 javascript 中，您可以直接将 references 存储到数组中的对象。 不，xpath 不是一个好主意；使用引用更简单更好。 因此，您的问题的直接答案是：DOM 元素/节点除了 自身 之外没有唯一标识符。

在 javascript 中，所有对象都是通过引用传递的。所以这里有一个示例代码来说明如何做到这一点：

var theArray = [];
var theNodeToTraverse = document.getElementById('domelementtosearch');

traverseAndStore(theNodeToTraverse);

function traverseAndStore( node )

    if( node==null) return;
    theArray[ theArray.length ] = node;
    for( i=0; i<node.childNodes.length; i++ )
        traverseAndStore( node.childNodes[i] );

【讨论】：

这段代码简单地遍历了theNodeToTraverse的所有子元素，并将对子DOM元素的引用存储在theArray中。

这样的引用可以用作唯一ID吗？例如，我可以将它存储在某个地方并在另一个 javascript 脚本中重新使用它来访问同一个节点吗？如果不是（我怀疑），那么您将如何“记住”脚本之间的节点？

"记住脚本之间的节点" - 如果它们只是加载在同一页面上的不同脚本（读取不同的 js 文件），并且您想要传递引用（使用方法调用或共享空间），你绝对可以做到。您不能做的是以某种方式将引用存储在数据库中，然后稍后将其传递回该页面以期望它可用。

@jrharshath 这正是 我 想做的，有什么想法吗？

我现在有 :) 可悲的是，我不是以此为生的。

【参考方案2】：

你可以用这样的东西得到类似于 xpath 的东西。它从输入元素通过parentNode属性向上遍历dom。

https://gist.github.com/sebjwallace/3c0a6f7493ce23134516

它会输出这样的字符串。

"#document/HTML/BODY/DIV"

var getElementPath = function(el)
  var path = el.nodeName;
  var parent = el.parentNode;
  while(parent)
    path = parent.nodeName + '/' + path;
    parent = parent.parentNode;
  
  return path;

【讨论】：

为了唯一的 id，如果有两个 DIV 是 BODY 元素的子元素，这将失败，因为它们都将具有相同的输出字符串。这将使 this 作为 id 的唯一性无效。

你能用一些独特的东西更新答案吗？