Maison > Article > interface Web > Comment créer une fonction `generateSelector` pour générer un chemin de sélecteur CSS pour un élément DOM ?

Comment créer une fonction `generateSelector` pour générer un chemin de sélecteur CSS pour un élément DOM ?

王林avant: 2023-09-20 18:17:111448parcourir

La méthode

如何创建一个函数 `generateSelector` 来生成 DOM 元素的 CSS 选择器路径？

generateSelector est un outil utile pour déterminer le chemin d'accès à une partie spécifique d'un site Web, appelée élément DOM. Comprendre le fonctionnement des sélecteurs CSS et comment les créer peut être utile dans diverses situations, telles que l'automatisation des tests ou la création de raccourcis pour sélectionner facilement des éléments. Dans cet article, nous discuterons du concept de cette fonction et fournirons des exemples clairs sur la façon de l'utiliser.

Supposons que vous souhaitiez modifier un élément spécifique sur votre site Web. Mais comment savoir quel sélecteur utiliser ? C'est là qu'intervient notre fonction generateSelector ! Cette fonction obtiendra un élément spécifique sur le site Web et nous donnera un sélecteur que nous pourrons utiliser pour le modifier.

En savoir plus sur les sélecteurs CSS

Avant de nous plonger dans la création de la fonction generateSelector, il est crucial de comprendre ce que sont les sélecteurs CSS et les principes qui sous-tendent leur fonctionnement.

Les sélecteurs CSS sont des modèles utilisés pour sélectionner des éléments HTML sur une page qui nécessitent un style. Ils constituent un aspect fondamental des feuilles de style CSS, servant à appliquer des styles à des éléments spécifiques.

Exemple

La règle CSS suivante utilise un sélecteur pour cibler tous les éléments e388a4556c0f65e1904146cc1a846bee de la page et attribue la propriété de style de couleur au rouge -

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         color: red;
      }
   </style>
</head>
<body>
   <p>This text will be red.</p>
</body> 
</html>

Exemple

Le p dans les règles CSS est le sélecteur. Les sélecteurs CSS peuvent être beaucoup plus complexes que le nom de balise d'un élément. Ils peuvent être utilisés pour sélectionner des éléments en fonction de leur classe, ID, valeurs d'attribut, etc. Par exemple -

<!DOCTYPE html>
<html>
<head>
   <style>
      #main-header {
         background-color: blue;
      }
   </style>
</head>
<body>
   <header id="main-header">
      <h1>My website</h1>
   </header>
   <!-- other content here -->
</body>
</html>

Cette règle CSS sélectionne l'élément avec l'ID "main-header" et lui applique le style "backgroundcolor: blue".

Créer la fonction generateSelector

Après avoir introduit le concept de sélecteurs CSS (un sélecteur CSS est une méthode d'identification et de positionnement d'éléments spécifiques dans une page Web à des fins de style), nous pouvons maintenant passer à la création de la fonction generateSelector. La fonction acceptera un élément DOM (Document Object Model) en entrée et en retour, elle fournira le chemin du sélecteur CSS pour cet élément spécifique.

Grammaire

function generateSelector(element) {
   let selectors = [];
}

Tout d'abord, nous allons démarrer un tableau vide appelé "sélecteur". Ce tableau agira comme un conteneur pour les sélecteurs que nous générons pour un élément DOM donné lors du parcours et de l'inspection de ses éléments ancêtres.

Grammaire

while (element) {
   let selector = '';
   if (element.tagName === 'HTML') {
      selector = 'html';
   }
}

Lorsque nous parcourons chaque ancêtre, nous générerons un sélecteur pour celui-ci. Nous vérifions d'abord si l'élément est un élément 100db36a723c770d327fc0aef2ce13b1 Si c'est le cas, nous ajouterons la chaîne "html" à la variable du sélecteur

Pour tous les autres éléments, nous vérifierons si l'élément a un identifiant. Si tel est le cas, nous utiliserons l’ID comme sélecteur. Sinon, nous utiliserons le nom de balise de l'élément et son nom de classe comme sélecteur.

Grammaire

else {
   if (element.id) {
      selector = '#' + element.id;
   } else {
      selector = element.tagName.toLowerCase();
      if (element.className) {
         selector += '.' + element.className.replace(/\s+/g, '.');
      }
   }
}

Après avoir généré le sélecteur, nous l'ajoutons au tableau de sélecteurs et passons à l'ancêtre suivant en définissant element égal à element.parentNode.

Grammaire

selectors.unshift(selector);{
   element = element.parentNode;
}

Enfin, nous utiliserons la méthode join() pour joindre tous les sélecteurs du tableau de sélecteurs et renvoyer le chemin du sélecteur CSS résultant sous forme de chaîne.

Grammaire

return selectors.join(' > ');{
}

Utilisez la fonction generateSelector

Maintenant que nous avons implémenté la fonction generateSelector, voyons comment l'utiliser en pratique.

Par exemple, disons que vous avez le HTML suivant -

<!DOCTYPE html>
<html>
<body>
   <div id="myDiv">
      <p>Hello World</p>
   </div>
   <div id="result"></div>
   <script>
      function generateSelector(element) {
         let selectors = [];
         while (element) {
            let selector = '';
            if (element.id) {
               selector = '#' + element.id;
            } else {
               selector = element.tagName;
            }
            selectors.unshift(selector);
            element = element.parentNode;
         }
         return selectors.join(' > ');
      }
   </script>
   <script>
      window.onload = function(){
         
         // Select the <p> element and get its CSS selector path
         const p = document.querySelector("p");
         if(p!==null){
            const selector = generateSelector(p);
            document.getElementById("result").innerHTML = selector;
         }
         else{
            console.log("Error : Element not found");
         }
      }
   </script>
</body>
</html>

Il est important de noter qu'il ne s'agit que d'un exemple et que le sélecteur variera en fonction des éléments et de la structure HTML que vous transmettez à la fonction.

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!

css html 字符串对象 dom 选择器样式表自动化

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelques règles CSSArticle suivant：Quelques règles CSS

Articles Liés

Voir plus