Comment générer des chemins CSS précis à partir d'éléments DOM : pourquoi :nth-child est important ?

Comment générer des chemins CSS précis à partir d'éléments DOM

Vous avez fourni une fonction qui récupère les chemins CSS à partir d'éléments DOM. Bien qu'il capture efficacement la hiérarchie de l'élément, il lui manque la précision requise pour une identification unique.

Le problème

Le chemin CSS du 123ème élément d'ancrage renvoyé par votre fonction est :

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

Cependant, pour identifier complètement l'élément, il doit inclure le sélecteur :nth-child :

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

La solution

Pour dériver des chemins CSS précis, implémentez les améliorations suivantes dans votre fonction :

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

Cette fonction améliorée :

• Gère les nœuds non-élémentaires : Empêche les terminaison de boucle lors de la rencontre de nœuds non-élémentaires.
• Donne la priorité aux sélecteurs d'ID : Identifie les ancêtres avec des ID pour améliorer l'efficacité du chemin.
• Utilise le nième de type : Améliore la lisibilité et le caractère unique des sélecteurs.

En incorporant ces modifications, vous pouvez générer en toute confiance des chemins CSS précis qui représentent avec précision la hiérarchie et la position des éléments DOM.

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!