Maison >interface Web >tutoriel CSS >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:111500parcourir
La méthode
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!