استرداد مسار CSS من عنصر 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(" > ");
}

التحسينات والفوائد:

• التحسين القائم على المعرف: تعطي الوظيفة الأولوية للعناصر المطابقة مع سمة المعرف، وإيقاف البحث بمجرد مواجهة معرف. وهذا يضمن وجود محدد CSS فريد وفعال.
محدد النوع التاسع:
• من خلال الاستفادة من محدد النوع رقم، تحدد الوظيفة موضع العنصر بين أشقائه، مما يوفر أفضل الخصوصية وسهولة القراءة.
مناسبة لجميع عقد العناصر:
• تتعامل الوظيفة بشكل صحيح مع جميع عقد العناصر (باستثناء العقد النصية)، وتلتقط موضعها بدقة داخل شجرة DOM.

باستخدام هذه الوظيفة المحسنة، يمكن للمرء الآن الحصول على مسار CSS أكثر دقة لعنصر معين:

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