Извлечение пути CSS из элемента DOM с повышенной точностью

Предоставленная функция пытается сгенерировать путь CSS для данного элемента DOM. Однако его выводам не хватает специфичности, и они не могут уловить положение элемента среди своих братьев и сестер. Чтобы решить эту проблему, нам нужен более сложный подход.

Улучшенная функция CSS Path

Усовершенствованная функция, представленная ниже, устраняет первоначальные ограничения:

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

Усовершенствования и преимущества:

• Оптимизация на основе идентификатора: Функция определяет приоритет совпадающих элементов с атрибутом id, останавливая поиск как только идентификатор встречается. Это обеспечивает уникальный и эффективный селектор CSS.
• Селектор N-го типа: Используя селектор n-го типа, функция определяет положение элемента среди его однотипных элементов, обеспечивая лучшее специфичность и читаемость.
• Подходит для всех узлов элементов: Функция корректно обрабатывает все узлы элементов (за исключением текстовых узлов), точно фиксируя их положение в дереве DOM.

Пример использования:

Используя эту улучшенную функцию, теперь можно получить более точный путь CSS для данного элемента:

console.log(cssPath(document.getElementsByTagName('a')[123]));
// Output: "html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)"