在 DOM 树中使用某种节点编号进行元素搜索

Question

我正在寻找 JavaScript 可以提供的递归搜索策略（JQuery 也欢迎）。现在我可以查找一个元素，如果我知道它的 id、className 或 tagName，或者我也可以找到基于父节点中的 css 属性和元素索引的其他条件。

所以基本上我想要完成的是根据它的 x,y 位置搜索一个节点（这很简单），然后在内存中存储对该节点的某种引用（在 Java 之外脚本代码），然后重新使用该引用（可能该引用是 dom 树中的节点号）再次定位相同的元素。

在此 HTML 页面中，元素不会有任何 ID、class 名称。

如何获得对 DOM 中任意元素的可序列化引用？

编辑我正在研究 android 的 webview，首先 Java 代码调用 Java 脚本例程并获取元素（我正在寻找的数字）和 java 的后半部分编码它再次将该元素编号传递给 javascript 以定位相同的元素。

Answer 1

store some kind of reference to this node in memory (outside javascript code) and later re-use that reference (maybe this reference is a node number in dom tree) for locating the same element again.

最简单的形式：

存储子位置列表，从 document
迭代该列表以检索有问题的元素

即

function refElement(elem) {
    var positions = [],
        position;

    while (elem) {
        position = 0;
        while (elem.previousElementSibling) {
            position++;
            elem = elem.previousElementSibling;
        }
        positions.unshift(position);
        elem = elem.parentElement;
    }
    return positions.join();
}

function getElement(ref) {
    var positions = ref.split(/,/),
        elem = document;

    while (elem && positions.length) {
        elem = elem.children[positions.shift()];
    }
    return elem;
}

测试：

var e = document.getElementsByTagName("TEXTAREA")[0];
var ref = refElement(e);
console.log(ref)                   // 0,4,6,1,0,2,1,4,6,0,0,1
console.log(e === getElement(ref)) // true

应该不用说了：这个解决方案假设在 refElement() 和 getElement().

的调用之间有一个不可变的文档结构

在 DOM 树中使用某种节点编号进行元素搜索

Element search using some kind of node number in DOM Tree

javascript

jquery

html

dom