javascript - 基于分层节点树的构建数组

我有以下HTML标记：

<body>
   <div class="wrapper">
      <div class="head">
         <p class="title">title</p>
         <a href="#" class="logo"></a>
      </div>
   </div>
</body

我需要获得类似以下内容的信息-类为“ logo”的“ A”元素是类为“ head”的div元素的seconde childNode。类“ head”的div元素是类“ wrapper”的div元素的第一个childNode，类“ wrapper”的div元素是body的第一个childNode。然后，我将获得带有“徽标”类的链接的位置，如下所示：

var a = [1，1，2]

因此，如果我使用上面的数组朝相反的方向前进，我将在body元素中找到DOM中带有“徽标”类的链接。有人可以告诉我如何使用JavaScript来实现吗？

提前致谢。

最佳答案

这是一对根据我现有的一些代码改编而成的函数，用于将节点转换为节点内嵌套位置的数组，然后再次返回。

现场演示：http://jsfiddle.net/DSNUv/

码：

function getNodeIndex(node) {
    var i = 0;
    while( (node = node.previousSibling) ) {
        i++;
    }
    return i;
}

function nodeToPath(node, rootNode) {
    var path = [], n = node;
    rootNode = rootNode || document.documentElement;
    while (n && n != rootNode) {
        path.push(getNodeIndex(n));
        n = n.parentNode;
    }
    return path;
}

function pathToNode(path, rootNode) {
    rootNode = rootNode || document.documentElement;
    var node = rootNode;
    var i = path.length, nodeIndex;

    while (i--) {
        nodeIndex = path[i];
        if (nodeIndex < node.childNodes.length) {
            node = node.childNodes[nodeIndex];
        } else {
            throw new Error("Child node index out of range: " + nodeIndex);
        }
    }

    return node;
}

使用示例：

var a = document.getElementsByTagName("a")[0];

var path = nodeToPath(a, document.body);
alert(path);

var el = pathToNode(path, document.body);
alert(el.className);

ChildNode

javascript - 基于分层节点树的构建数组