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

大家平时很熟悉通过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;
    },