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

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

Mary-Kate Olsen
Libérer: 2024-10-25 15:09:02
original
948 Les gens l'ont consulté

How to Generate More Accurate CSS Paths from DOM Elements in 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal