Javascript获取html元素的XPath路径（选择器）

最新推荐文章于 2024-07-30 03:33:50 发布

f789456x

最新推荐文章于 2024-07-30 03:33:50 发布

阅读量2.4k

点赞数

原文链接：https://blog.csdn.net/shy871265996/article/details/9110051?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160929754416780257411770%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fall.%252522%25257D&request_id=1

版权

Javascript获取html元素的XPath路径（选择器）
XPath 是一门在 XML 文档中查找信息的语言，是一个功能强大的选择器。

如果后台需要
XPath路径采集结构化数据，我们如何从浏览器端获得所需元素路径？

function readXPath(element) {
if (element.id!==""){//判断id属性，如果这个元素有id，则显示//[@id=“xPath”] 形式内容
return '//[@id="’+element.id+’"]’;
}

if (element.getAttribute("class")!==null){ //判断class属性，如果这个元素有class，则显 示//*[@class="xPath"]  形式内容
    return '//*[@class=\"'+element.getAttribute("class")+'\"]';
}
//因为Xpath属性不止id和class，所以还可以更具class形式添加属性
//这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用）

if (element==document.body){//递归到body处，结束递归
    return '/html/'+element.tagName;
}

var ix= 0,//在nodelist中的位置，且每次点击初始化
      siblings= element.parentNode.childNodes;//同级的子元素

for (var i= 0,l=siblings.length; i<l; i++) {
    var sibling= siblings[i];
    if (sibling==element){//如果这个元素是siblings数组中的元素，则执行递归操作
        return arguments.callee(element.parentNode)+'/'+element.tagName+((ix+1)==1?'':'['+(ix+1)+']');//ix+1是因为xpath是从1开始计数的，element.tagName+((ix+1)==1?'':'['+(ix+1)+']')三元运算符，如果是第一个则不显示，从2开始显示
    }else if(sibling.nodeType==1 && sibling.tagName==element.tagName){//如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加
        ix++;
    }
}

};

实例中使用：

无

无ID和class

无ID和class2

无

class

用jquery写的，当鼠标点击一个元素时，显示元素的xpath路径
$(document).ready(function () {
var xpath = ‘’, o;
$(’*’).click(function (e) {
e.stopPropagation();//停止冒泡
o = this;
alert(readXPath(o));
});
});