Heim > Artikel > Web-Frontend > Wie erstelle ich eine Funktion „generateSelector“, um einen CSS-Selektorpfad für ein DOM-Element zu generieren?

Wie erstelle ich eine Funktion „generateSelector“, um einen CSS-Selektorpfad für ein DOM-Element zu generieren?

王林nach vorne: 2023-09-20 18:17:111448Durchsuche

Die

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

generateSelector-Methode ist ein nützliches Tool zum Bestimmen des Pfads zu einem bestimmten Teil einer Website, einem sogenannten DOM-Element. Zu verstehen, wie CSS-Selektoren funktionieren und wie man sie erstellt, kann in einer Vielzahl von Situationen hilfreich sein, beispielsweise bei der Testautomatisierung oder beim Erstellen von Verknüpfungen zur einfachen Auswahl von Elementen. In diesem Artikel besprechen wir das Konzept dieser Funktion und geben klare Beispiele für deren Verwendung.

Angenommen, Sie möchten ein bestimmtes Element auf Ihrer Website ändern. Aber woher wissen Sie, welchen Selektor Sie verwenden sollen? Hier kommt unsere Funktion „generateSelector“ ins Spiel! Diese Funktion ruft ein bestimmtes Element auf der Website ab und gibt uns einen Selektor, mit dem wir es ändern können.

Erfahren Sie mehr über CSS-Selektoren

Bevor wir uns mit der Erstellung der Funktion „generateSelector“ befassen, ist es wichtig zu verstehen, was CSS-Selektoren sind und welche Prinzipien ihrer Funktionsweise zugrunde liegen.

CSS-Selektoren sind Muster, die zur Auswahl von HTML-Elementen auf einer Seite verwendet werden, die ein Styling erfordern. Sie sind ein grundlegender Aspekt von CSS-Stylesheets und dienen als Mittel zum Anwenden von Stilen auf bestimmte Elemente.

Beispiel

Die folgende CSS-Regel verwendet einen Selektor, um alle e388a4556c0f65e1904146cc1a846bee-Elemente auf der Seite anzusprechen, und weist Rot die Stileigenschaft Farbe zu -

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

Beispiel

Das p in CSS-Regeln ist der Selektor. CSS-Selektoren können viel komplexer sein als der Tag-Name eines Elements. Sie können verwendet werden, um Elemente basierend auf ihrer Klasse, ID, Attributwerten usw. auszuwählen. Zum Beispiel -

<!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>

Diese CSS-Regel wählt das Element mit der ID „main-header“ aus und wendet den Stil „backgroundcolor: blue“ darauf an.

GenerateSelector-Funktion erstellen

Nachdem wir das Konzept der CSS-Selektoren eingeführt haben (ein CSS-Selektor ist eine Methode zum Identifizieren und Positionieren bestimmter Elemente auf einer Webseite zu Gestaltungszwecken), können wir nun mit der Erstellung der Funktion „generateSelector“ fortfahren. Die Funktion akzeptiert ein DOM-Element (Document Object Model) als Eingabe und stellt im Gegenzug den CSS-Selektorpfad für dieses bestimmte Element bereit.

Grammatik

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

Zuerst starten wir ein leeres Array namens „Selektor“. Dieses Array fungiert als Container für die Selektoren, die wir für ein bestimmtes DOM-Element generieren, wenn wir dessen Vorgängerelemente durchlaufen und prüfen.

Grammatik

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

Wenn wir jeden Vorfahren durchlaufen, generieren wir einen Selektor dafür. Wir prüfen zunächst, ob das Element ein 100db36a723c770d327fc0aef2ce13b1-Element ist. Wenn ja, fügen wir der Selektorvariablen

die Zeichenfolge „html“ hinzu

Für alle anderen Elemente prüfen wir, ob das Element eine ID hat. Wenn ja, verwenden wir die ID als Selektor. Wenn nicht, verwenden wir den Tag-Namen des Elements und seinen Klassennamen als Selektor.

Grammatik

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

Nachdem wir den Selektor generiert haben, fügen wir ihn dem Selektor-Array hinzu und wechseln zum nächsten Vorfahren, indem wir element auf element.parentNode setzen.

Grammatik

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

Abschließend verwenden wir die Methode „join()“, um alle Selektoren im Selektor-Array zu verbinden und den resultierenden CSS-Selektorpfad als String zurückzugeben.

Grammatik

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

Verwenden Sie die Funktion „generateSelector“

Da wir nun die Funktion „generateSelector“ implementiert haben, sehen wir uns an, wie man sie in der Praxis verwendet.

Angenommen, Sie haben den folgenden HTML-Code:

<!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>

Es ist wichtig zu beachten, dass dies nur ein Beispiel ist und der Selektor je nach den Elementen und der HTML-Struktur, die Sie an die Funktion übergeben, variiert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Funktion „generateSelector“, um einen CSS-Selektorpfad für ein DOM-Element zu generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Einige CSS-RegelnNächster Artikel：Einige CSS-Regeln

In Verbindung stehende Artikel

Mehr sehen