logo

JavaScript querySelector

QuerySelector je JavaScript metoda koja igra vitalnu ulogu u pretraživanju elemenata.

U ovom ćemo odjeljku razumjeti i raspravljati o metodi querySelector (), njenoj upotrebi, a također ćemo pogledati primjer kako bismo praktično razumjeli koncept metode querySelector ().

Predstavljamo metodu JavaScript querySelector ().

Metoda sučelja elementa koja nam omogućuje pretraživanje i vraćanje prvog elementa unutar dokumenta. Pronalazi taj element koji odgovara bilo kojem od navedenih CSS selektora ili grupe selektora. Međutim, ako se ne pronađe odgovarajući element, vraća null. Metoda querySelector () samo je metoda sučelja dokumenta. Sučelje dokumenta je sučelje koje opisuje uobičajene metode kao i svojstva za bilo koji html, XML ili bilo koji drugi dokument.

Kako metoda querySelector () izvodi pretraživanje

Znamo da postoje različite vrste pretraživanja koje se mogu koristiti za pretraživanje elemenata. Međutim, metoda querySelector () koristi dubina-prva prednarudžba obilaženje čvorova dokumenta. U njemu obilazak počinje s prvim elementom u oznaci dokumenta, a zatim prelazi kroz sekvencijalne čvorove prema redoslijedu broja podređenih čvorova.

gdje mogu pronaći postavke preglednika

Sintaksa

 element = document.querySelector(selectors); 

Metoda querySelector () je metoda sučelja dokumenta i stoga ima takvu sintaksu.

Ima jedan parametar, 'selektore', koji je DOM niz i ima jedan ili više valjanih CSS selektora.

Vrsta povrata

Može vratiti 'null' ako se ne pronađe podudaranje, a ako prvi element odgovara navedenim CSS selektorima (ako postoje), vratit će taj element.

Međutim, ako ne postoji valjani CSS selektor, izbacit će iznimku 'SyntaxError'.

Sada, prije nego što pogledamo primjer implementacije, trebali bismo znati o raznim vrstama CSS selektora. Ako niste upoznati, posjetite naš https://www.javatpoint.com/css-selector dio vodiča za CSS.

značajke java8

Dakle, sada ćemo implementirati primjer u kojem ćemo pokriti CSS selektor i zadržati vrijednost njegovog prvog elementa pomoću metode querySelector ().

Primjer implementacije querySelector ().

Ispod je primjer koda koji će nam pomoći da razumijemo rad metode 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); 

Sada možete vidjeti razliku između koda u kojem smo u prvom primjeru koristili metodu querySelector () i koji je ispisao samo prvu odgovarajuću vrijednost selektora. Ali, kada promatrate izlaz ovog drugog primjera, vidjet ćete da je vratio sve podudarne vrijednosti navedenih selektora ili grupe selektora. Ishod gornjeg koda prikazan je u nastavku:

JavaScript querySelector

Objašnjenje koda

  • Gornji kod je kombinacija html-a i JavaScript-a.
  • Implementirali smo različite CSS selektore u kod.
  • U JavaScript odjeljku upotrijebili smo metodu querySelectorAll () i pozvali selektor elementa CSS-a.
  • Dakle, metoda querySelectorAll () sada se pomiče na kod za njegovo prolaženje pomoću metode prednarudžbe prve dubine i vraća sve podudarne vrijednosti elemenata koje su navedene kao parametri metode querySlectorAll ().

Dakle, na isti način, možemo koristiti metodu querySelectorAll () i za razne druge vrste CSS selektora, a ona će vratiti sve podudarne vrijednosti selektora koji su navedeni kao njen argument. Kako biste implementirali metodu, zamijenite metodu querySelector () metodom querySelectorAll () za razne selektore, a metoda će pronaći podudaranje i vratiti barem jednu odgovarajuću vrijednost navedenog elementa.