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

演示：点击“Run with JS”然后

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