如何从点击的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;
    },

更多js实现方式，详细参考：

https://www.e-learn.cn/content/wangluowenzhang/74021

我测试了这个版本，感觉还可以：

// e.target

var 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(" > ");
     }