logo

JavaScript querySelector

El querySelector és un mètode JavaScript que juga un paper vital en la cerca d'elements.

En aquesta secció, entendrem i parlarem del mètode querySelector (), el seu ús i també veurem un exemple per entendre el concepte del mètode querySelector () de manera pràctica.

Presentació del mètode JavaScript querySelector ().

Un mètode d'interfície d'elements que ens permet cercar i retornar el primer element dins del document. Troba l'element que coincideix amb qualsevol dels selectors CSS o grup de selectors especificats. Tanmateix, si no es troba cap element coincident, retorna null. El mètode querySelector () és només el mètode de la interfície Document. Una interfície de document és una interfície que descriu els mètodes comuns així com les propietats de qualsevol document html , XML o qualsevol altre tipus de document.

Com fa la cerca el mètode querySelector ()?

Sabem que hi ha diferents tipus de cerques que es poden utilitzar per cercar elements. Tanmateix, utilitza el mètode querySelector (). primera comanda prèvia travessa dels nodes del document. En ell, el recorregut comença amb el primer element del marcatge del document i després recorre els nodes seqüencials per ordre del nombre de nodes fills.

recerca contradictòria

Sintaxi

 element = document.querySelector(selectors); 

El mètode querySelector () és un mètode d'interfície de document i, per tant, té aquesta sintaxi.

Té un paràmetre, 'selectors', que és una cadena DOM i té un o més selectors CSS vàlids.

Tipus de retorn

Pot tornar 'nul' si no es troba cap coincidència, i si el primer element coincideix amb els selectors CSS especificats (si n'hi ha), retornarà aquest element.

variable bash

Tanmateix, si no hi ha cap selector CSS vàlid, llançarà una excepció 'SyntaxError'.

Ara, abans de veure un exemple d'implementació, hauríem de conèixer diversos tipus de selectors CSS. Si no ho saps, visita el nostre https://www.javatpoint.com/css-selector secció del tutorial CSS.

Per tant, ara implementarem un exemple en el qual cobrirem un selector CSS i conservarem el seu primer valor d'element mitjançant el mètode querySelector ().

Implementació de querySelector () Exemple

A continuació es mostra un exemple de codi que ens farà entendre el funcionament del mètode querySelector ():

 class=&apos;colors&apos;&gt;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 (&apos;p&apos;); console.log(e); 

Ara, podeu veure la diferència entre el codi que en el primer exemple, vam utilitzar el mètode querySelector () i només va generar el primer valor del selector coincident. Però, quan observeu la sortida d'aquest segon exemple, veureu que ha retornat tots els valors coincidents dels selectors o grup de selectors especificats. La sortida del codi anterior es mostra a continuació:

JavaScript querySelector

Explicació del codi

  • El codi anterior és una combinació d'html i JavaScript.
  • Hem implementat diferents selectors CSS al codi.
  • A la secció JavaScript, hem utilitzat un mètode querySelectorAll () i hem invocat un selector d'elements de CSS.
  • Per tant, el mètode querySelectorAll () ara es mou al codi per recórrer-lo mitjançant el mètode de pre-ordre Depth-first i retorna tots els valors d'element coincidents que s'especifiquen com a paràmetres del mètode querySlectorAll ().

Així, de la mateixa manera, també podem utilitzar el mètode querySelectorAll () per als altres tipus de selectors CSS, i retornarà tots els valors coincidents dels selectors que s'especifiquen com a argument. Per implementar el mètode, substituïu el mètode querySelector () pel mètode querySelectorAll () per a diversos selectors, i el mètode trobarà la coincidència i retornarà almenys un valor coincident de l'element especificat.