如何使用javascript获取元素的css选择器

How to get css selector for an element using javascript?

本文关键字：css 选择器 元素 获取 何使用 javascript      更新时间：2023-09-26

是否有任何jQuery插件或javascript代码可以返回唯一选择特定元素的CSS选择器？

我正在寻找与Chrome开发工具中的复制CSS路径功能类似的功能，为我提供了一个看起来像这样的选择器：

#question > table > tbody > tr:nth-child(2) > td > div > h2

我尝试过的答案

获取Jquery 中元素的唯一选择器

获取唯一选择器jQuery

刚刚发现这篇文章，查看了唯一的答案，并被它的复杂性和使用jQuery函数时的奇怪拒绝吓坏了。很抱歉受到批评，但我真的被这个回调系统惊呆了。在这里，以易于使用的形式：

function getCSSPath(el) {
    let rendered_path_parts = [];
    $( el ).parents().addBack().each((i, el) => {
        const $el = $( el );
        let current_el_path = $el.prop('tagName').toLowerCase();
        if ($el.attr('id')) {
            current_el_path += '#' + $el.attr('id');
        }
        if ($el.attr('class')) {
            current_el_path += '.' + $el.attr('class').split(' ').join('.');
        }
        rendered_path_parts.push( current_el_path );
    })
    return rendered_path_parts.join(' ');
}
$.fn.extend({
    getPath: function() {
        return getCSSPath(this.length === 1 ? this : this.eq(0));
    }
});
getCSSPath(some_element);
some_jquery_element.getPath();

请注意，呈现的选择器将不包括元素的索引，因此它的描述性不如选择器开发工具所能为您提供的那么强。

不完美，但写得很快（为您）：）

http://jsfiddle.net/k1qs69fz/7/

代码：

function getCSSPath(el, callback){
    var fullPath = '';
    var cssPathFn = function (el, callback){
        var elPath = '';
        elPath = $(el).prop('tagName').toLowerCase();
        if(typeof $(el).attr('id') !== 'undefined'){
            elPath = elPath+'#'+$(el).attr('id');
        }
        if(typeof $(el).attr('class') !== 'undefined'){
            elPath = elPath+'.'+$(el).attr('class').split(' ').join('.');
        }
        fullPath = elPath+' '+fullPath;
        if(typeof $(el).parent().prop('tagName') !== 'undefined'){
            cssPathFn($(el).parent(), callback);
        }
        else{
            callback(fullPath);
        }
    };
    cssPathFn(el, callback);
}


用法：

getCSSPath($('selector'), callbackFunction);

函数基于tag名称，id和class名称，不支持indexes。


示例用法（用于JSFiddle上的HTML代码）：

$(document).ready(function (){
    getCSSPath($('#lorem-ipsum'), function (path){
        console.log(path);
    });
});


样本结果：

html body div#id1.c1.c2.c3 div#id2 div.c4.c5 span span.c6 ul li a span#lorem-ipsum

这里是其他人使用Element.attributes的纯JavaScript实现，所以它应该在任何地方都能工作。

我将其作为一个片段，这样您就可以看到document.querySelector与找到的选择器一起工作。

function getCSSSelector(el){
    let selector = el.tagName.toLowerCase();
    const attrs = el.attributes
    for (var i = 0; i < attrs.length; i++) {
        let attr = attrs.item(i)
        if (attr.name === 'id') selector += `#${attr.value}`;
        if (attr.name === 'class') selector += attr.value.split(' ').map((c) => `.${c}`).join('');
        if (attr.name === 'name') selector += `[${attr.name}=${attr.value}]`;
    }
    return selector
}
let el = document.querySelector('input#id.abc');
let selector = getCSSSelector(el);
console.log(selector)
document.querySelector(selector).value = selector;
<input id="id", class="abc def" name='name' style='width: 200px'>

相关文章：