उन्नत परिशुद्धता के साथ DOM तत्व से CSS पथ पुनर्प्राप्त करना

प्रदान किया गया फ़ंक्शन किसी दिए गए DOM तत्व के लिए CSS पथ उत्पन्न करने का प्रयास करता है। हालाँकि, इसके आउटपुट में विशिष्टता का अभाव है, जो अपने भाई-बहनों के भीतर तत्व की स्थिति को पकड़ने में विफल है। इसे संबोधित करने के लिए, हमें अधिक परिष्कृत दृष्टिकोण की आवश्यकता है।

बेहतर सीएसएस पथ फ़ंक्शन

नीचे प्रस्तुत उन्नत फ़ंक्शन मूल सीमाओं को संबोधित करता है:

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

संवर्द्धन और लाभ:

• आईडी-आधारित अनुकूलन: फ़ंक्शन एक आईडी विशेषता के साथ मेल खाने वाले तत्वों को प्राथमिकता देता है, खोज को रोकता है एक बार एक आईडी सामने आ जाती है। यह एक अद्वितीय और कुशल सीएसएस चयनकर्ता सुनिश्चित करता है। विशिष्टता और पठनीयता।
• उदाहरण उपयोग:
इस बेहतर फ़ंक्शन का उपयोग करके, कोई अब किसी दिए गए तत्व के लिए अधिक सटीक सीएसएस पथ प्राप्त कर सकता है:
• console.log(cssPath(document) .getElementsByTagName('a')[123])); // आउटपुट: "html > बॉडी > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)"