Die
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.
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.
Die folgende CSS-Regel verwendet einen Selektor, um alle
-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>
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.
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.
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.
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 -Element ist. Wenn ja, fügen wir der Selektorvariablen
die Zeichenfolge „html“ hinzuFü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.
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.
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.
return selectors.join(' > ');{
}
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!
