使用javascript記錄和檢索html元素/節點路徑

Question

說我在一個大的html文檔中選擇了一個span標籤。如果我把整個HTML文檔當作一個大的嵌套數組，我可以通過數組索引找到span標籤的位置。如何輸出索引路徑到該span標籤？例如：使用JavaScript的1,2,0,12,7。

另外，如何通過索引路徑選擇span標籤？

Answer 1

這將工作。它以數組而不是字符串的形式返回路徑。

根據您的要求進行了更新。

您可以點擊此處查看：http://jsbin.com/isata5/edit（打預覽）

// get a node's index. 
function getIndex (node) { 
    var parent=node.parentElement||node.parentNode, i=-1, child; 
    while (parent && (child=parent.childNodes[++i])) if (child==node) return i; 
    return -1; 
} 

// get a node's path. 
function getPath (node) { 
    var parent, path=[], index=getIndex(node); 
    (parent=node.parentElement||node.parentNode) && (path=getPath(parent)); 
    index > -1 && path.push(index); 
    return path; 
} 

// get a node from a path. 
function getNode (path) { 
    var node=document.documentElement, i=0, index; 
    while ((index=path[++i]) > -1) node=node.childNodes[index]; 
    return node; 
} 

---

這個例子應該在控制檯此頁面上工作。

var testNode=document.getElementById('comment-4007919'); 
console.log("testNode: " + testNode.innerHTML); 

var testPath=getPath(testNode); 
console.log("testPath: " + testPath); 

var testFind=getNode(testPath); 
console.log("testFind: " + testFind.innerHTML); 

Answer 2

使用jQuery：

var tag = $('#myspan_id'); 
var index_path = []; 
while(tag) { 
    index_path.push(tag.index()); 
    tag = tag.parent(); 
} 
index_path = index_path.reverse(); 

Answer 3

使用DOM

node = /*Your span element*/; 
var currentNode = node; 
var branch = []; 
var cn; /*Stores a Nodelist of the current parent node's children*/ 
var i; 
while (currentNode.parentNode !== null) 
    { 
    cn = currentNode.parentNode.childNodes; 
    for (i=0;i<cn.length;i++) 
     { 
     if (cn[i] === currentNode) 
      { 
      branch.push(i); 
      break; 
      } 
     } 
    currentNode = currentNode.parentNode; 
    } 
cn = document.childNodes; 
for (i=0;i<cn.length;i++) 
    { 
    if (cn[i] === currentNode) 
     { 
     branch.push(i); 
     break; 
     } 
    } 
node.innerHTML = branch.reverse().join(",");