创建数组

我有以下的HTML标记：创建数组

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

我需要像下面 - 与类“标识”是div的Seconde系列childNode的“A”元素元素与类“头”。带有“head”类的div元素是class为“wrapper”的div元素的第一个childNode，class为“wrapper”的div元素是body的第一个childNode。然后我会得到与类“标志”的链路的位置，如下：

VAR一个= [1，1,2]

所以，如果我使用上述阵列去在相反的方向，我将从body元素开始在DOM中找到类“logo”的链接。任何人都可以告诉我，JavaScript如何实现？

在此先感谢。

来源

2011-11-02 cycero

您应该知道，在大多数实现中，元素节点之间的空白会导致文本节点作为附加的子节点存在，例如，在您的示例中，div class =“head”在大多数实现中都具有文本子节点，元素子节点，文本子节点，元素子节点和文本子节点。试图在'childNodes'集合中索引元素节点因此可能比你目前想象的更加困难。然而，现在有一个'children'集合只包含元素子节点，所以根据您的需要，您可能会考虑使用该集合。 –

谢谢。任何例子？我无法理解如何计算。 – cycero

@cycero你不能。你应该避免在基于HTML的'.childNodes'中对位置进行假设。 – Raynos

这里有一对函数根据我的一些现有代码进行调整，将一个节点转换为一个节点内的嵌套位置数组，然后再返回。

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

来源

2011-11-02 11:48:10

这是一些很棒的代码！谢谢蒂姆！ – cycero

考虑下面的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

我不太清楚是什么你想要一个chieve。但我建议你只是走树，而不是建造关系船的某种阵列。

来源

2011-11-02 12:19:38 Raynos

回答

相关问题