javascript - 识别跨浏览器的元素

Question

我有一个在两个浏览器窗口中打开的页面，它通过套接字与用户进行交互。如果有人点击一个元素，我希望它在其他浏览器中发生。为此，我需要知道与之交互的元素。

我有几个选项，但没有一个可以 100% 保证有效。

• 按元素名称:可以有多个同名元素。
• 按 id:并非所有元素都有 id
• 按类:并非所有元素都有一个类，并且类不是唯一的
• 按位置:如果网站在两个不同的浏览器中打开，则位置可能不同。

那么是否有其他方法来识别 100% 确凿的元素？

Answer 1

如果您在两个页面中有完全相同的 HTML，您可以简单地使用一个“路径”，该路径由父级中的索引构建到 document.body。它易于构建且易于使用来查找元素。

以下是计算这条路径或跟随它的函数:

function indexInParent(node) {
    var children = node.parentNode.childNodes;
    for (var i=0; i<children.length; i++) {
         if (children[i]==node) return i;
    }
    return -1;
}

function nodePath(e) {
   var path = [];
   while (e!=document.body) {
      path.push(indexInParent(e));
      e = e.parentNode;
   }
   return path.reverse().join('-');
}

function getNode(path) {
   path = path.split('-');
   var e = document.body;
   while(path.length && e) e=e.childNodes[parseInt(path.shift())];
   return e;
}

Demonstration : 然后单击“使用 JS 运行”

• 点击一个元素在控制台中查看路径
• 键入路径以在控制台中查看元素