Comment puis-je générer des chemins CSS précis pour les éléments DOM ?

Récupération du chemin CSS d'un élément DOM avec une précision améliorée

La fonction fournie tente de générer un chemin CSS pour un élément DOM donné. Cependant, sa sortie manque de spécificité, ne parvenant pas à capturer la position de l'élément au sein de ses frères et sœurs. Pour résoudre ce problème, nous avons besoin d'une approche plus sophistiquée.

Fonction de chemin CSS améliorée

La fonction améliorée présentée ci-dessous répond aux limitations d'origine :

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

Améliorations et avantages :

• Optimisation basée sur l'identifiant : La fonction donne la priorité aux éléments correspondants avec un attribut d'identifiant, arrêtant la recherche une fois qu'un identifiant est rencontré . Cela garantit un sélecteur CSS unique et efficace.
• Sélecteur de nième de type : En exploitant le sélecteur de nième de type, la fonction identifie la position de l'élément parmi ses frères, offrant ainsi une meilleure spécificité et lisibilité.
• Convient à tous les nœuds d'éléments : La fonction gère correctement tous les nœuds d'éléments (à l'exclusion des nœuds de texte), capturant avec précision leur position dans l'arborescence DOM.

Exemple d'utilisation :

Grâce à cette fonction améliorée, on peut désormais obtenir un chemin CSS plus précis pour un élément donné :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!