我有以下 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 元素的第二个子节点。类“head”的div元素是类“wrapper”的div元素的第一个子节点，类“wrapper”的div元素是类“body”的第一个子节点。然后我会得到类“logo”链接的位置，如下所示:
变量 a = [1, 1, 2]
因此，如果我使用上面的数组朝相反的方向前进，我会在 DOM 中从 body 元素开始找到类为“logo”的链接。谁能告诉我如何使用 JavaScript 实现这一点？
提前致谢。
最佳答案
这里有一对函数改编 self 的一些现有代码，用于将节点转换为节点内嵌套位置的数组，然后再返回。
现场演示: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);
关于javascript - 基于层级节点树构建数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7978501/