Cara Menjana Laluan CSS Tepat daripada Elemen DOM: Mengapa :nth-child Penting?

Cara Menjana Laluan CSS Tepat daripada Elemen DOM

Anda telah menyediakan fungsi yang mendapatkan semula laluan CSS daripada elemen DOM. Walaupun ia menangkap hierarki elemen secara berkesan, ia tidak mempunyai ketepatan yang diperlukan untuk pengenalan unik.

Masalahnya

Laluan CSS untuk elemen penambat ke-123 yang fungsi anda kembalikan ialah:

html > body > div#div-id > div.site > div.clearfix > ul.choices > li

Walau bagaimanapun, untuk mengenal pasti sepenuhnya elemen, ia harus memasukkan pemilih :nth-child:

html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)

Penyelesaian

Untuk mendapatkan laluan CSS yang tepat, laksanakan peningkatan berikut dalam fungsi anda:

<code class="javascript">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(" > ");
 };</code>

Fungsi yang dipertingkatkan ini:

• Mengendalikan nod bukan elemen: Mencegah pramatang penamatan gelung apabila menemui nod bukan elemen.
• Mengutamakan pemilih ID: Mengenal pasti nenek moyang dengan ID untuk meningkatkan kecekapan laluan.
• Menggunakan jenis ke-n: Meningkatkan kebolehbacaan dan keunikan pemilih.

Dengan menggabungkan pengubahsuaian ini, anda dengan yakin boleh menjana laluan CSS tepat yang mewakili hierarki dan kedudukan elemen DOM dengan tepat.

Atas ialah kandungan terperinci Cara Menjana Laluan CSS Tepat daripada Elemen DOM: Mengapa :nth-child Penting?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!