Der querySelector ist eine JavaScript-Methode, die bei der Suche nach Elementen eine wichtige Rolle spielt.
In diesem Abschnitt werden wir die Methode querySelector() und ihre Verwendung verstehen und diskutieren und uns auch ein Beispiel ansehen, um das Konzept der Methode querySelector() praktisch zu verstehen.
Einführung in die JavaScript-Methode querySelector()
Eine Elementschnittstellenmethode, die es uns ermöglicht, das erste Element im Dokument zu suchen und zurückzugeben. Es findet das Element, das mit einem der angegebenen CSS-Selektoren oder einer Gruppe von Selektoren übereinstimmt. Wenn jedoch kein passendes Element gefunden wird, wird null zurückgegeben. Die Methode querySelector() ist nur die Methode der Document-Schnittstelle. Eine Dokumentschnittstelle ist eine Schnittstelle, die die allgemeinen Methoden sowie die Eigenschaften für jedes HTML, XML oder jede andere Art von Dokument beschreibt.
Wie führt die Methode querySelector() die Suche durch?
Wir wissen, dass es verschiedene Arten von Suchen gibt, die für die Suche nach Elementen verwendet werden können. Die Methode querySelector() verwendet jedoch Tiefe-zuerst-Vorbestellung Durchlaufen der Knoten des Dokuments. Darin beginnt der Durchlauf mit dem ersten Element im Markup des Dokuments und durchläuft dann die aufeinanderfolgenden Knoten in der Reihenfolge der Anzahl der untergeordneten Knoten.
allgemeine Schutzverletzung
Syntax
element = document.querySelector(selectors);
Die Methode querySelector() ist eine Methode der Dokumentschnittstelle und verfügt daher über eine solche Syntax.
Es verfügt über einen Parameter, „selectors“, der ein DOM-String ist und über einen oder mehrere gültige CSS-Selektoren verfügt.
Rückgabetyp
Es kann „null“ zurückgeben, wenn keine Übereinstimmung gefunden wird, und wenn das erste Element mit den angegebenen CSS-Selektoren (falls vorhanden) übereinstimmt, wird dieses Element zurückgegeben.
Wenn jedoch kein gültiger CSS-Selektor vorhanden ist, wird eine „SyntaxError“-Ausnahme ausgelöst.
Bevor wir uns nun eine Beispielimplementierung ansehen, sollten wir uns über verschiedene Arten von CSS-Selektoren informieren. Wenn Sie es nicht wissen, besuchen Sie unsere https://www.javatpoint.com/css-selector Abschnitt des CSS-Tutorials.
String-Format in Java
Daher implementieren wir nun ein Beispiel, in dem wir einen CSS-Selektor abdecken und seinen ersten Elementwert mithilfe der Methode querySelector() beibehalten.
Beispiel für die Implementierung von querySelector()
Nachfolgend finden Sie einen Beispielcode, der uns die Funktionsweise der Methode querySelector() verständlich macht:
class='colors'>Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll ('p'); console.log(e);
Jetzt können Sie den Unterschied zwischen dem Code erkennen, bei dem wir im ersten Beispiel die Methode querySelector() verwendet haben und der nur den ersten passenden Selektorwert ausgegeben hat. Wenn Sie sich jedoch die Ausgabe dieses zweiten Beispiels ansehen, werden Sie feststellen, dass alle übereinstimmenden Werte der angegebenen Selektoren oder Selektorgruppen zurückgegeben wurden. Die Ausgabe des obigen Codes ist unten dargestellt:
Code-Erklärung
- Der obige Code ist eine Kombination aus HTML und JavaScript.
- Wir haben verschiedene CSS-Selektoren im Code implementiert.
- Im JavaScript-Abschnitt haben wir eine querySelectorAll()-Methode verwendet und einen Elementselektor von CSS aufgerufen.
- Daher wechselt die Methode querySelectorAll () nun zum Code, um ihn mithilfe der Vorbestellungsmethode „Depth-first“ zu durchlaufen, und gibt alle übereinstimmenden Elementwerte zurück, die als Parameter der Methode querySlectorAll () angegeben sind.
Auf die gleiche Weise können wir die Methode querySelectorAll() auch für die verschiedenen anderen Arten von CSS-Selektoren verwenden und sie gibt alle übereinstimmenden Werte der Selektoren zurück, die als Argument angegeben sind. Um die Methode zu implementieren, ersetzen Sie die Methode querySelector() durch die Methode querySelectorAll() für verschiedene Selektoren. Die Methode findet dann die Übereinstimmung und gibt mindestens einen passenden Wert des angegebenen Elements zurück.