Question

我有以下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。然后我会得到带有“logo”类的链接的位置如下：

var a = [1,1,2]

所以，如果我使用上面的数组向相反的方向前进，我将从body元素开始在DOM中找到类“logo”的链接。有谁可以告诉我如何用JavaScript实现这一目标？

提前致谢。

Answer 1

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

现场演示：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);

Answer 2

给出以下HTML：

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

var el = document.body; // body
var div = document.body.firstChild; // div.wrapper
el === div.parentNode; // body === body
var div2 = div.firstElementChild; // div.head
div2.parentNode.parentNode === el; // body === body
var p = div2.firstElementChild; // p.title
var a = p.nextElementSibling; // a.logo
div2.children[1] === a; // a === a

我不太确定你想要实现的目标。但我建议你只是走树而不是以某种阵列构建关系船。

基于分层节点树构建阵列

2 个答案: