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

Création de chemins CSS précis à partir d'éléments DOM

En JavaScript, la construction de chemins CSS à partir d'éléments DOM est une tâche courante. Pour résoudre ce problème, il existe une fonction populaire, cssPath. Cependant, il produit souvent des chemins qui manquent de détails importants, tels que les sélecteurs de nième enfant.

Le code fourni offre une solution :

<code class="js">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>

Améliorations par rapport à la fonction d'origine :

• Évite les sorties prématurées : La fonction d'origine s'est arrêtée lors de la rencontre de nœuds non-élémentaires, ce qui a entraîné des chemins incorrects. La version améliorée continue le parcours pour une précision améliorée.
• Souligne la clarté : En utilisant les sélecteurs nth-of-type() au lieu du générique :nth-child(), les chemins générés deviennent plus précis et lisible par l'homme.
• S'arrête aux éléments ancêtres avec des ID : La fonction améliorée s'arrête lorsqu'elle rencontre le premier élément ancêtre avec un ID attribué, rationalisant le chemin et améliorant sa lisibilité.

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!