Question

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

所以基本上我要完成的是基于x，y位置搜索节点（这很容易），然后在内存中存储对此节点的某种引用（在JavaScript代码之外）以后再重新使用该引用（可能此引用是dom树中的节点号）来再次定位同一元素。

在这个HTML页面中，元素不会有任何id，类名。

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

修改我正在开发android的webview，首先Java代码调用JavaScript例程，它获取元素（我正在寻找的数字），在java代码的后期，它将该元素号再次传递给javascript以查找相同的元素。

Answer 1

在内存中存储对此节点的某种引用（在javascript代码之外），然后重新使用该引用（可能此引用是dom树中的节点编号），以便再次定位同一元素。

最简单的形式：

存储子位置列表，从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 Tree中的某种节点编号进行元素搜索

1 个答案: