原生JS获取被点击元素Selector路径

一、HTML文件：

    
    
    
    
    
    



    
显示全部点击记录
    

        

            输出错误
            获取路径
            弹窗
        
    
    

        

            输出错误
            获取路径
            弹窗
        
    
    

        

            测试
            测试2
            测试3
        
        

            测试4
            测试5
            测试6
        
        

    
    

二、JS文件：

//tz.js文件内容

//时间格式化
Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
}

//获取节点selector路径
var DomLists = Array();    //存储被点击元素记录

//获取被点击元素方法
function getPath() {
    e=arguments[0];
    window.event? window.event.cancelBubble = true : e.stopPropagation();   //  阻止冒泡
    let domPath = Array();
    let domText = ""; //元素文本
    if (e.innerText) {
        domText = e.innerText;
    } else {
        domText = e.nodeName.toLocaleLowerCase();
    }
    let domTime = new Date().format("yyyy-MM-dd hh:mm:ss"); //点击时间
    //判断是否存在ID
    if (e.id) {
        domPath.unshift('#'+e.id.toLocaleLowerCase());
    } else {
        //循环匹配元素
        while (e.nodeName.toLowerCase() !== "html") {
            if(e.id){
                //判断是否存在ID
                domPath.unshift('#'+e.id.toLocaleLowerCase());
                break;
            }else if(e.tagName.toLocaleLowerCase() == "body") {
                //判断是否是BODY元素
                domPath.unshift(e.tagName.toLocaleLowerCase());
            }else{
                //遍历获取元素顺序
                for (i = 0; i < e.parentNode.childElementCount; i++) {
                    if (e.parentNode.children[i] == e) {
                        domPath.unshift(e.tagName.toLocaleLowerCase() + ':nth-child(' + (i + 1) + ')');
                    }
                }
            }
            e = e.parentNode;
        }
        //domPath.unshift('html');
        domPath = domPath.toString().replaceAll(',', '>');
    }

    //添加到点击记录
    DomLists.push({
        "text": domText,
        "path": domPath,
        "time": domTime
    });

    console.log('元素文本: ' + domText + '   路径: ' + domPath + '   时间: ' + domTime);

    //返回结果
    return {
        "text": domText,
        "path": domPath,
        "time": domTime
    };
}

三、效果图

被点击元素Selector