說我在一個大的html文檔中選擇了一個span標籤。如果我把整個HTML文檔當作一個大的嵌套數組,我可以通過數組索引找到span標籤的位置。如何輸出索引路徑到該span標籤?例如:使用JavaScript的1,2,0,12,7。使用javascript記錄和檢索html元素/節點路徑
另外,如何通過索引路徑選擇span標籤?
說我在一個大的html文檔中選擇了一個span標籤。如果我把整個HTML文檔當作一個大的嵌套數組,我可以通過數組索引找到span標籤的位置。如何輸出索引路徑到該span標籤?例如:使用JavaScript的1,2,0,12,7。使用javascript記錄和檢索html元素/節點路徑
另外,如何通過索引路徑選擇span標籤?
這將工作。它以數組而不是字符串的形式返回路徑。
根據您的要求進行了更新。
您可以點擊此處查看: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);
感謝您的回答。我將如何從路徑中獲取對象/元素? // 0,1,16,1,0,3 – Rana 2010-09-24 01:57:41
你可以通過遞歸找到someNode.'childNodes' [pathIndex],其中someNode作爲文檔元素('window.document.documentElement')開始。我會在一分鐘內更新答案。 – 2010-09-24 02:19:28
感謝您的更新。還有另一個問題。爲什麼node.parentElement || node.parentNode?他們之間有什麼區別? – Rana 2010-09-24 02:51:46
使用jQuery:
var tag = $('#myspan_id');
var index_path = [];
while(tag) {
index_path.push(tag.index());
tag = tag.parent();
}
index_path = index_path.reverse();
使用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(",");
我認爲IE需要非標準的'parentElement'而不是'parentNode'。 – 2010-09-24 01:21:03
自IE5好友IE支持'parentNode':p – 2010-09-24 01:24:20
我剛剛參加了Dreamweaver附帶的O'Reilly Javascript Reference。 – 2010-09-24 01:56:50
爲什麼你只是不使用jquery或xpath來查找跨度?我認爲這更容易。 – Topera 2010-09-24 00:32:59