Как получить полную строку селекторов CSS из данного объекта DOM

Question

Я хочу написать функцию

function f (domEl){
    //some code here

    //returns a string
}

такую, что:

$(f(domEl))[0] == domEl

всегда должно возвращать true (конечно, независимо от иерархии domEl): ​​

В качестве примера, скажем:

HTML
    body
        ul
            li
            **li**
            li
                ul
                    li

и я хочу выделить жирный элемент li.Я получаю этот элемент и передаю его в мою функцию f.

Answer 1

ДЕМО: http://jsfiddle.net/vzWgb/

function f (domEl){
    var s = [],
        node = domEl;

    do {
        s.unshift(build_nth_selector(node));
    } while((node = node.parentNode) && node !== document.body)

    s.unshift('BODY')

    return s.join(' > ');
}

function build_nth_selector(node) {
    var p = 1,
        n_name = node.nodeName.toUpperCase();
    while (node = node.previousElementSibling)
        ++p;
    return n_name + ':nth-child(' + p + ')'
}

var $ = function(s) { return document.querySelector(s); };

var el = document.getElementById('target');

alert(f(el));

alert($(f(el)) === el);

1009 *

Селектор выглядит следующим образом (для кода, который я использовал в примере) ...

BODY > DIV:nth-child(1) > DIV:nth-child(1) > UL:nth-child(1) > LI:nth-child(2) > UL:nth-child(1) > LI:nth-child(5)