QuerySelector je metoda JavaScript, ki ima ključno vlogo pri iskanju elementov.
V tem razdelku bomo razumeli in razpravljali o metodi querySelector (), njeni uporabi ter si ogledali primer za praktično razumevanje koncepta metode querySelector ().
Predstavljamo metodo JavaScript querySelector ().
Metoda elementnega vmesnika, ki nam omogoča iskanje in vrnitev prvega elementa v dokumentu. Najde tisti element, ki se ujema s katerim koli od navedenih izbirnikov CSS ali skupine izbirnikov. Če pa ne najde nobenega ujemajočega se elementa, vrne nič. Metoda querySelector () je samo metoda vmesnika Document. Vmesnik dokumenta je vmesnik, ki opisuje običajne metode kot tudi lastnosti katerega koli dokumenta html, XML ali katere koli druge vrste.
Kako metoda querySelector () izvaja iskanje
Vemo, da obstajajo različne vrste iskanj, ki jih je mogoče uporabiti za iskanje elementov. Vendar metoda querySelector () uporablja prednaročilo prve globine prečkanje vozlišč dokumenta. V njem se prečkanje začne s prvim elementom v oznaki dokumenta in nato prečka zaporedna vozlišča po vrstnem redu števila podrejenih vozlišč.
industrijo in tovarno
Sintaksa
element = document.querySelector(selectors);
Metoda querySelector () je metoda vmesnika dokumenta in ima tako sintakso.
Ima en parameter, 'izbirnike', ki je niz DOM in ima enega ali več veljavnih izbirnikov CSS.
Vrsta povratka
Lahko vrne 'null', če ni ujemanja, in če se prvi element ujema z navedenimi izbirniki CSS (če obstajajo), vrne ta element.
Če pa ni nobenega veljavnega izbirnika CSS, bo vrgel izjemo 'SyntaxError'.
Preden pogledamo primer izvedbe, bi morali poznati različne vrste izbirnikov CSS. Če niste seznanjeni, obiščite našo https://www.javatpoint.com/css-selector razdelek vadnice CSS.
Tako bomo zdaj implementirali primer, v katerem bomo pokrili izbirnik CSS in obdržali vrednost njegovega prvega elementa z uporabo metode querySelector ().
Primer izvajanja querySelector ().
Spodaj je primer kode, ki nam bo pomagal razumeti delovanje metode querySelector ():
datum pretvori v niz
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);
Zdaj lahko vidite razliko med kodo, v kateri smo v prvem primeru uporabili metodo querySelector () in je izpisala samo prvo ujemajočo se izbirno vrednost. Ko pa opazujete izhod tega drugega primera, boste videli, da je vrnil vse ujemajoče se vrednosti podanih izbirnikov ali skupine izbirnikov. Izhod zgornje kode je prikazan spodaj:
Koda Razlaga
- Zgornja koda je kombinacija html in JavaScript.
- V kodo smo implementirali različne izbirnike CSS.
- V razdelku JavaScript smo uporabili metodo querySelectorAll () in priklicali izbirnik elementov CSS.
- Torej se metoda querySelectorAll () zdaj premakne v kodo za njeno prečkanje z metodo prednaročila Depth-first in vrne vse ujemajoče se vrednosti elementov, ki so podane kot parametri metode querySlectorAll ().
Torej lahko na enak način uporabimo metodo querySelectorAll () tudi za različne druge vrste izbirnikov CSS in vrnila bo vse ujemajoče se vrednosti izbirnikov, ki so navedeni kot njen argument. Če želite implementirati metodo, zamenjajte metodo querySelector () z metodo querySelectorAll () za različne izbirnike, metoda pa bo našla ujemanje in vrnila vsaj eno ujemajočo se vrednost navedenega elementa.