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

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

王林

Libérer： 2023-09-20 18:17:11

avant

1503 Les gens l'ont consulté

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

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>

Copier après la connexion

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>

Copier après la connexion

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 = [];
}

Copier après la connexion

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';
   }
}

Copier après la connexion

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 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, '.');
      }
   }
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!