Javascript 标识不带类或ID的HTML元素的路径

因此，在我的代码中，当您单击某个元素时，它将提示标记的名称

我真正想做的是找到路径，这样我可以稍后再次引用该元素

例如，如果我点击文本“世界”，我会得到

分区（2）>UL>LI（2）

我不想在jQuery中这样做，只是简单的老生常谈。

document.addEventListener（“单击”，eOnClick，true）；
功能单击（e）{
警报（e.target.tagName）；
}

div{
边框：1px纯红；
}
保险商实验室{
边框：1px纯绿色；
}
李{
边框：1px纯蓝色；
}

你好
世界

如果我理解正确，这就是您需要做的：

更新

document.addEventListener（“单击”，eOnClick，true）；
功能单击（e）{
var目标=e.target；
var指数=计算指数（目标）
var path=target.tagName+“[”+索引+“]”；
while（target.parentNode）
{
target=target.parentNode；
if（target.parentNode！=未定义）{
索引=计算索引（目标）
path=target.tagName+“[”+索引+“]”+“>”+路径；
}
}
警报（路径）；
}
函数计算索引（元素）{
var ix=0；
var sides=element.parentNode.childNodes；
对于（var i=0；i，如果我正确理解了你，这就是你需要做的：

更新

document.addEventListener（“单击”，eOnClick，true）；
功能单击（e）{
var目标=e.target；
var指数=计算指数（目标）
var path=target.tagName+“[”+索引+“]”；
while（target.parentNode）
{
target=target.parentNode；
if（target.parentNode！=未定义）{
索引=计算索引（目标）
path=target.tagName+“[”+索引+“]”+“>”+路径；
}
}
警报（路径）；
}
函数计算索引（元素）{
var ix=0；
var sides=element.parentNode.childNodes；
对于（var i=0；i
var html=“
1
2
3
1
2
3
2
3
1
2
3
”；
document.body.innerHTML+=html；
函数nodelistToArray（nodelist）{
返回Array.prototype.slice.call（nodelist）；
}
功能遍历（目标、链）{
如果（链===void 0）{
链=[]；
}
var index=NodeListArray（target.parentNode.children.filter）（函数（a）{
返回a.nodeName==target.nodeName；
}).indexOf（目标公司）；
推链({
要素：目标，
索引：索引
});
if（target.nodeName.toLowerCase（）=“html”）{
返回链。反向（）；
}否则{
返回遍历（target.parentNode，chain）；
}
}
document.body.onclick=函数（evt）{
var链=导线（evt.目标）；
控制台日志（链）；
警报（chain.map）（函数（elm）{
返回elm.element.nodeName+'['+（elm.index.toString（）+']；
})。加入（“>”）；
}；
var html=“
1
2
3
1
2
3
2
3
1
2
3
”；
document.body.innerHTML+=html；
函数nodelistToArray（nodelist）{
返回Array.prototype.slice.call（nodelist）；
}
功能遍历（目标、链）{
如果（链===void 0）{
链=[]；
}
var index=NodeListArray（target.parentNode.children.filter）（函数（a）{
返回a.nodeName==target.nodeName；
}).indexOf（目标公司）；
推链({
要素：目标，
索引：索引
});
if（target.nodeName.toLowerCase（）=“html”）{
返回链。反向（）；
}否则{
返回遍历（target.parentNode，chain）；
}
}
document.body.onclick=函数（evt）{
var链=导线（evt.目标）；
控制台日志（链）；
警报（chain.map）（函数（elm）{
返回elm.element.nodeName+'['+（elm.index.toString（）+']；
})。加入（“>”）；
}；
使用以下复杂解决方案：


document.addEventListener（“单击”，eOnClick，true）；
功能单击（e）{
var el=e.target，
路径=[]，
标记名=”，
最近的=e.target.parentNode；
而（el.parentNode&&el.parentNode！==文档）{
tagName=el.parentNode.tagName，last=path[path.length-1]；
//如果是最近的父节点-分析同级节点
if（最近的===el.parentNode）{
对于（变量i=0，childs=closest.childNodes，len=childs.length，c=1；i1）path.push（el.tagName+c）；
}
如果（！last | |（last！==标记名和&last.indexOf（标记名）！==0））{
path.push（标记名）；
}否则{
var num=last.match（/\d+$/）；
最后一个=标记名+（（num）？数字（num）+1:2；
路径[path.length-1]=最后一个；
}
el=el.parentNode；
}
path=path.reverse（）.map（函数（v）{返回v.replace（/（\d+）$/，“（$1）”；}）；
警报（路径）；
}
div{
边框：1px纯红；
}
保险商实验室{
边框：1px纯绿色；
}
李{
边框：1px纯蓝色；
}


你好
世界

使用以下复杂解决方案：


document.addEventListener（“单击”，eOnClick，true）；
功能单击（e）{
var el=e.target，
路径=[]，
标记名=”，
最近的=e.target.parentNode；
而（el.parentNode&&el.parentNode！==文档）{
tagName=el.parentNode.tagName，last=path[path.length-1]；
//如果是最近的父节点-分析同级节点
if（最近的===el.parentNode）{
对于（变量i=0，childs=closest.childNodes，len=childs.length，c=1；i1）path.push（el.tagName+c）；
}
如果（！last | |（last！==标记名和&last.indexOf（标记名）！==0））{
path.push（标记名）；
}否则{
var num=last.match（/\d+$/）；
最后一个=标记名+（（n