De querySelector is een JavaScript-methode die een cruciale rol speelt bij het zoeken naar elementen.
In deze sectie zullen we de methode querySelector () en het gebruik ervan begrijpen en bespreken, en ook een voorbeeld bekijken om het concept van de methode querySelector () praktisch te begrijpen.
Introductie van de JavaScript-querySelector () -methode
Een elementinterfacemethode waarmee we het eerste element in het document kunnen zoeken en retourneren. Er wordt dat element gevonden dat overeenkomt met een van de opgegeven CSS-selectors of een groep selectors. Als er echter geen overeenkomend element wordt gevonden, retourneert het null. De methode querySelector () is alleen de methode van de documentinterface. Een documentinterface is een interface die de algemene methoden beschrijft, evenals de eigenschappen voor elk html-, XML- of ander soort document.
Hoe voert de methode querySelector () de zoekopdracht uit
We weten dat er verschillende soorten zoekopdrachten zijn die kunnen worden gebruikt voor het zoeken naar elementen. De methode querySelector () gebruikt echter diepte-eerste pre-order het doorlopen van de knooppunten van het document. Daarin begint de doorloop met het eerste element in de opmaak van het document en doorkruist vervolgens de opeenvolgende knooppunten in volgorde van het aantal onderliggende knooppunten.
np.som
Syntaxis
element = document.querySelector(selectors);
De methode querySelector () is een methode voor documentinterface en heeft daarom een dergelijke syntaxis.
Het heeft één parameter, 'selectors', wat een DOM-string is en een of meer geldige CSS-selectors heeft.
Retourtype
Het kan 'null' retourneren als er geen overeenkomst wordt gevonden, en als het eerste element overeenkomt met de opgegeven CSS-kiezers (indien aanwezig), wordt dat element geretourneerd.
Als er echter geen geldige CSS-selector is, genereert deze een 'SyntaxError'-uitzondering.
Voordat we naar een voorbeeldimplementatie kijken, moeten we eerst iets weten over verschillende soorten CSS-selectors. Als u het niet weet, bezoek dan onze https://www.javatpoint.com/css-selector sectie van de CSS-tutorial.
We zullen nu dus een voorbeeld implementeren waarin we een CSS-selector zullen behandelen en de eerste elementwaarde ervan zullen behouden door de methode querySelector () te gebruiken.
QuerySelector () implementeren Voorbeeld
Hieronder staat een voorbeeldcode waarmee we de werking van de querySelector () -methode kunnen begrijpen:
generiekheid in Java
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);
Nu kunt u het verschil zien tussen de code waarin we in het eerste voorbeeld de methode querySelector () gebruikten en die alleen de eerste overeenkomende selectorwaarde uitvoerde. Maar als u de uitvoer van dit tweede voorbeeld bekijkt, zult u zien dat alle overeenkomende waarden van de opgegeven selectors of groep selectors zijn geretourneerd. De uitvoer van de bovenstaande code wordt hieronder weergegeven:
Code-uitleg
- Bovenstaande code is een combinatie van HTML en JavaScript.
- We hebben verschillende CSS-selectors in de code geïmplementeerd.
- In de JavaScript-sectie hebben we een querySelectorAll () -methode gebruikt en een elementselector van CSS aangeroepen.
- De methode querySelectorAll () gaat nu naar de code om deze te doorlopen met behulp van de methode Depth-first pre-order en retourneert alle overeenkomende elementwaarden die zijn opgegeven als parameters van de methode querySlectorAll ().
Op dezelfde manier kunnen we dus de methode querySelectorAll () ook gebruiken voor de verschillende andere typen CSS-selectors, en deze retourneert alle overeenkomende waarden van de selectors die als argument zijn opgegeven. Om de methode te implementeren, vervangt u de methode querySelector () door de methode querySelectorAll () voor verschillende selectors. De methode zal de overeenkomst vinden en ten minste één overeenkomende waarde van het opgegeven element retourneren.