QuerySelector este o metodă JavaScript care joacă un rol vital în căutarea elementelor.
În această secțiune, vom înțelege și discuta metoda querySelector (), utilizarea acesteia și, de asemenea, vom analiza un exemplu pentru a înțelege conceptul metodei querySelector () practic.
Introducerea metodei JavaScript querySelector ().
O metodă de interfață cu elemente care ne permite să căutăm și să returnăm primul element din document. Găsește acel element care se potrivește cu oricare dintre selectorii CSS sau grupul de selectori specificati. Cu toate acestea, dacă nu se găsește niciun element care se potrivește, acesta returnează null. Metoda querySelector () este doar metoda interfeței Document. O interfață de document este o interfață care descrie metodele comune, precum și proprietățile oricărui document html, XML sau orice alt tip de document.
Cum efectuează metoda querySelector () căutarea
Știm că există diferite tipuri de căutări care pot fi folosite pentru căutarea elementelor. Cu toate acestea, se utilizează metoda querySelector (). precomanda depth-first parcurgerea nodurilor documentului. În ea, traversarea începe cu primul element din marcajul documentului și apoi traversează nodurile secvențiale în ordinea numărului de noduri copii.
unde gasesc setarile browserului meu
Sintaxă
element = document.querySelector(selectors);
Metoda querySelector () este o metodă de interfață a documentului și deci are o astfel de sintaxă.
Are un parametru, „selectori”, care este un șir DOM și are unul sau mai mulți selectori CSS validi.
Tip de returnare
Poate returna „null” dacă nu se găsește nicio potrivire, iar dacă primul element se potrivește cu selectoarele CSS specificate (dacă există), va returna acel element.
Cu toate acestea, dacă nu există un selector CSS valid, va arunca o excepție „SyntaxError”.
Acum, înainte de a privi un exemplu de implementare, ar trebui să știm despre diferite tipuri de selectoare CSS. Dacă nu știți, vizitați-ne https://www.javatpoint.com/css-selector secțiunea tutorialului CSS.
Deci, acum vom implementa un exemplu în care vom acoperi un selector CSS și vom păstra valoarea primului său element folosind metoda querySelector ().
Implementarea querySelector () Exemplu
Mai jos este un exemplu de cod care ne va face să înțelegem funcționarea metodei querySelector ():
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);
Acum, puteți vedea diferența dintre codul care, în primul exemplu, am folosit metoda querySelector () și a scos doar prima valoare a selectorului potrivită. Dar, când observați rezultatul acestui al doilea exemplu, veți vedea că a returnat toate valorile potrivite ale selectoarelor sau grupului de selectori specificate. Rezultatul codului de mai sus este prezentat mai jos:
Explicația codului
sortați o listă de matrice
- Codul de mai sus este o combinație de html și JavaScript.
- Am implementat diferite selectoare CSS în cod.
- În secțiunea JavaScript, am folosit o metodă querySelectorAll () și am invocat un selector de elemente CSS.
- Deci, metoda querySelectorAll () se mută acum la codul de parcurgere folosind metoda de precomandă Depth-first și returnează toate valorile elementelor potrivite care sunt specificate ca parametrii metodei querySlectorAll ().
Deci, în același mod, putem folosi metoda querySelectorAll () și pentru diferitele alte tipuri de selectoare CSS și va returna toate valorile potrivite ale selectoarelor care sunt specificate ca argument. Pentru a implementa metoda, înlocuiți metoda querySelector () cu metoda querySelectorAll () pentru diferiți selectori, iar metoda va găsi potrivirea și va returna cel puțin o valoare potrivită a elementului specificat.