Bagaimanakah Saya Boleh Menjana Laluan CSS Tepat untuk Elemen DOM?

Mendapatkan semula Laluan CSS daripada Elemen DOM dengan Ketepatan Dipertingkat

Fungsi yang disediakan cuba menjana laluan CSS untuk elemen DOM tertentu. Walau bagaimanapun, outputnya tidak mempunyai kekhususan, gagal menangkap kedudukan elemen dalam adik-beradiknya. Untuk menangani perkara ini, kami memerlukan pendekatan yang lebih canggih.

Fungsi Laluan CSS yang Diperbaiki

Fungsi dipertingkat yang dibentangkan di bawah menangani had asal:

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

Peningkatan dan Faedah:

• Pengoptimuman Berasaskan Id: Fungsi ini mengutamakan elemen padanan dengan atribut id, menghentikan carian sebaik sahaja id ditemui . Ini memastikan pemilih CSS yang unik dan cekap.
• Pemilih Jenis Kesembilan: Dengan memanfaatkan pemilih jenis ke-n, fungsi ini mengenal pasti kedudukan elemen dalam kalangan adik-beradiknya, memberikan yang lebih baik kekhususan dan kebolehbacaan.
• Sesuai untuk Semua Nod Elemen: Fungsi ini mengendalikan semua nod elemen dengan betul (tidak termasuk nod teks), menangkap kedudukannya dengan tepat dalam pepohon DOM.

Contoh Penggunaan:

Menggunakan fungsi yang dipertingkatkan ini, seseorang kini boleh mendapatkan laluan CSS yang lebih tepat untuk elemen tertentu:

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)"

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjana Laluan CSS Tepat untuk Elemen DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!