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

Question

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

xpath

什么的。

将节点的

xpath

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

xpath

？

Answer 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] );
}

Answer 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;
}

编辑： 这个问题似乎指向一个简单的平面图解决方案。我认为我最初的答案旨在为 DOM 中的每个节点生成一个地址。这个解决方案几乎和平面图一样基本。嗯，DOM 是一棵树，每个节点有 N 个子节点。给定 DOM 的快照，您可以根据子索引生成每个元素的地址。以 stackoverflow 的 DOM 为例，获取 5 层深度的节点之一 - 地址为 01001。对于 DOM 中的每个元素，每个地址都是唯一的。但是，如果您需要动态 Web 应用程序的静态地址，这将不起作用。

Answer 3

对于任何需要使用普通 JavaScript 的最接近方法的人

function closest(elm, selc){
    let target = null;
    let targetClosest = elm.parentElement;
    while (  targetClosest && !targetClosest.matches(selc)) {
        targetClosest = targetClosest.parentElement;
        console.log("repeater");
     }
     if (targetClosest && targetClosest.matches(selc)){
         target = targetClosest;
     }
    return target;
}
document.querySelectorAll("img[src='https://images.wuzzuf-data.net/files/company_logo/Etisalat-Misr-Egypt-4219-1656427377.png']").forEach( (blackListElm)=>{
    console.log(closest(blackListElm, ".e1v1l3u10"));
});