Javascript 给定DOM元素：尝试获取XPath？（部分工程）

正在尝试获取被单击的Domexact元素的XPath

尝试：我有一个名为createXPathFromElement的函数，它将单击dom元素并尝试获取XPath

函数的问题（据我所知）：除非dom元素的同级元素具有相同的类名，否则它将获得正确的XPath

我需要做的是：始终获得正确的XPath，即使：

• 所选dom元素没有类和或id（或两者都有）
• 所选dom元素可能有也可能没有同级（确保获得正确的子元素）
• 适用于任何网页/网站（适用于网页刮板）

为了测试XPath是否正确，我使用了一个名为

lookupElementByXPath

的函数来尝试查找XPath，该函数接受XPath并返回DOM元素或null

测试目的：我有一个JS提琴，正如你在单击前3个图像时看到的那样，我返回一个元素-但是单击图像4和图像5返回null（这是一个示例html结构，它可以是任何内容！）

关于如何在任何网页上正确获取的XPath有什么想法吗

函数createXPathFromElement（elm）{
console.log（“启动…”）；
//console.log（“++元素路径”，elm）；
var allNodes=document.getElementsByTagName（“*”）；
for（var segs=[]；elm&&elm.nodeType==1；elm=elm.parentNode）{
//log（“parentNode…”，elm）；
if（elm.hasAttribute（“id”））{
var uniqueIdCount=0；
对于（var n=0；n1）中断；
}
if（uniqueIdCount==1）{
segs.unshift（'id（'+elm.getAttribute（“id”）+'）；
返回segs.join（“/”）；
}否则{
分段取消移位(
elm.localName.toLowerCase（）+'[@id=“'+elm.getAttribute（“id”）+']
);
}
}else if（elm.hasAttribute（“类”））{
//现在添加-如果有一个类元素但有子元素-确保我在子元素中获得正确的元素索引
var hasSibling=false；
for（i=1，sib=elm.previousSibling；sib；sib=sib.previousSibling）{
if（sib.localName==elm.localName）{
i++；
hasSibling=正确；
}
}
如果（有争议）{
分段取消移位(
elm.localName.toLowerCase（）+
“[@class=”'+
elm.getAttribute（“类”）+
'"][' +
我+
"]"
);
}
如果（！hasSibling）{
分段取消移位(
elm.localName.toLowerCase（）+
“[@class=”'+
elm.getAttribute（“类”）+
'"]'
);
}
}否则{
for（i=1，sib=elm.previousSibling；sib；sib=sib.previousSibling）{
if（sib.localName==elm.localName）{
i++；
}
}
segs.unshift（elm.localName.toLowerCase（）+“[”+i+“]）；
}
}
返回segs.length？”/“+segs.join（“/”）：空；
}
函数lookupElementByXPath（路径）{
log（“xpath给定”，路径）；
var evaluator=新的XPathEvaluator（）；
var结果=evaluator.evaluate(
路径
document.documentElement，
无效的
XPathResult.FIRST\u ORDERED\u NODE\u类型，
无效的
);
返回result.singleNodeValue；
}
document.addEventListener（'click'，函数（e）{
var srcmelement=e.target；
/*log（“src单击”，src元素）*/
var xpath=createXPathFromElement（srcElement）；
var foundElement=lookupElementByXPath（xpath）
log（“found元素”，foundElement）；
})

漂亮的五个
$122$98

通常（也是更可靠的）方法是基于索引位置构建XPath，例如

div[0]/div[4]/a[2]

，而不是涉及类、ID或其他属性。任何事物都有一个位置索引；只有一些元素具有类/ID。通常（也是更可靠的）方法是基于索引位置构建XPath，例如

div[0]/div[4]/a[2]

，而不是涉及类、ID或其他属性。任何事物都有一个位置索引；只有一些元素具有类/id。