如何从点击的DOM元素获取css selector JavaScript

大家平时很熟悉通过css selector获取dom对象，如果反过来，如何获取元素对象的selector呢？
第一步，先看看谷歌浏览器的 Command Line API：
通过debug工具，可以coyp的值：

文章图片

Command Line API 包含一个用于执行以下常见任务的便捷函数集合：选择和检查 DOM 元素，以可读格式显示数据，停止和启动分析器，以及监控 DOM 事件。
注意: 此 API 仅能通过控制台本身获取。您无法通过网页上的脚本访问 Command Line API。
是不是有点失望呢？

第二步，自定义实现，全部通过jquery实现，原生javascript可以参照此思路。
A版本：使用jquery实现的代码
//返回样式如：html > body > div:nth-child(7) > div > div:nth-child(2)，

function getCssPath(obj){ var path = obj.parents().addBack(); var cssSelect = path.get().map(function(item) { var self = $(item), name = item.nodeName.toLowerCase(); index = self.siblings(name).length ? ':nth-child(' + (self.index() + 1) + ')' : ''; if (name === 'html' || name === 'body') { return name; } return name + index; }).join(' > '); return cssSelect; }

显然，这个结果与谷歌的工具API效果是有差距的，根据我的测试，如果对象有id属性，chrome会直接给出 #temd_idxxx.
A版本的优化：

getpath:function(obj){ if(obj.attr('id')){ return "#" + obj.attr("id"); } var path = obj.parents().addBack(); var cssSelect = path.get().map(function(item) { var self = $(item), name = item.nodeName.toLowerCase(); index = self.siblings(name).length ? ':nth-child(' + (self.index() + 1) + ')' : ''; if (name === 'html' || name === 'body') { return name; } return name + index; }).join(' > '); return cssSelect; },

更多js实现方式，详细参考：
【如何从点击的DOM元素获取css selector】https://www.e-learn.cn/content/wangluowenzhang/74021
我测试了这个版本，感觉还可以：

// e.targetvar cssPath = function(el) { if (!(el instanceof Element)) return; var path = []; while (el.nodeType === Node.ELEMENT_NODE) { var selector = el.nodeName.toLowerCase(); if (el.id) { selector += '#' + el.id; path.unshift(selector); break; } else { var sib = el, nth = 1; while (sib = sib.previousElementSibling) { if (sib.nodeName.toLowerCase() == selector) nth++; } if (nth != 1) selector += ":nth-of-type("+nth+")"; } path.unshift(selector); el = el.parentNode; } return path.join(" > "); }