創建數組

我有以下的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

回答

相關問題