QuerySelector on JavaScript-menetelmä, jolla on tärkeä rooli elementtien haussa.
Tässä osiossa ymmärrämme ja keskustelemme querySelector () -menetelmästä, sen käytöstä ja katsomme myös esimerkin ymmärtääksemme querySelector () -menetelmän käsitteen käytännössä.
Esittelyssä JavaScript querySelector () -menetelmä
Elementtirajapintamenetelmä, jonka avulla voimme etsiä ja palauttaa asiakirjan ensimmäisen elementin. Se löytää elementin, joka vastaa mitä tahansa määritettyä CSS-valitsinta tai valitsinryhmää. Jos vastaavaa elementtiä ei kuitenkaan löydy, se palauttaa null. querySelector () -menetelmä on vain asiakirjarajapinnan menetelmä. Asiakirjan käyttöliittymä on käyttöliittymä, joka kuvaa yleiset menetelmät sekä minkä tahansa html-, XML- tai minkä tahansa muun asiakirjan ominaisuudet.
Kuinka querySelector () -menetelmä suorittaa haun
Tiedämme, että elementtien etsimiseen voidaan käyttää erityyppisiä hakuja. Kuitenkin querySelector () -menetelmä käyttää syvyys-ennakkotilaus asiakirjan solmujen läpikulku. Siinä läpikulku alkaa asiakirjan merkinnän ensimmäisestä elementistä ja kulkee sitten peräkkäisten solmujen läpi lapsisolmujen lukumäärän mukaisessa järjestyksessä.
kuuntele portti
Syntaksi
element = document.querySelector(selectors);
querySelector () -menetelmä on asiakirjan käyttöliittymä, joten sillä on tällainen syntaksi.
Siinä on yksi parametri, valitsimet, joka on DOM-merkkijono ja jossa on yksi tai useampi kelvollinen CSS-valitsija.
Palautustyyppi
Se voi palauttaa arvon 'null', jos vastaavuutta ei löydy, ja jos ensimmäinen elementti vastaa määritettyjä CSS-valitsimia (jos sellaisia on), se palauttaa kyseisen elementin.
java anonyymi toiminto
Jos kelvollista CSS-valitsinta ei kuitenkaan ole, se antaa SyntaxError-poikkeuksen.
Nyt, ennen kuin tarkastelemme esimerkkitoteutusta, meidän pitäisi tietää erityyppiset CSS-valitsimet. Jos et ole tietoinen, vieraile https://www.javatpoint.com/css-selector CSS-opetusohjelman osio.
Joten toteutamme nyt esimerkin, jossa peitämme CSS-valitsimen ja säilytämme sen ensimmäisen elementin arvon käyttämällä querySelector () -menetelmää.
Esimerkki querySelectorin () toteuttamisesta
Alla on esimerkkikoodi, joka saa meidät ymmärtämään querySelector () -menetelmän toimintaa:
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);
Nyt voit nähdä eron koodin välillä, että ensimmäisessä esimerkissä käytimme querySelector () -menetelmää ja se antoi vain ensimmäisen vastaavan valitsinarvon. Mutta kun tarkastelet tämän toisen esimerkin tulosta, näet, että se on palauttanut kaikki määritettyjen valitsimien tai valitsinryhmän vastaavat arvot. Yllä olevan koodin tulos näkyy alla:
Koodin selitys
- Yllä oleva koodi on html:n ja JavaScriptin yhdistelmä.
- Olemme toteuttaneet koodissa erilaisia CSS-valitsimia.
- JavaScript-osiossa olemme käyttäneet querySelectorAll () -menetelmää ja kutsuneet CSS:n elementtivalitsimen.
- Joten querySelectorAll () -menetelmä siirtyy nyt koodiin sen läpikulkua varten käyttämällä Depth-first ennakkotilausmenetelmää ja palauttaa kaikki vastaavat elementtiarvot, jotka on määritetty querySlectorAll () -menetelmän parametreiksi.
Joten samalla tavalla voimme käyttää querySelectorAll () -menetelmää myös erilaisille muille CSS-valitsimille, ja se palauttaa kaikki valitsimien vastaavat arvot, jotka on määritetty sen argumentiksi. Menetelmän toteuttamiseksi korvaa querySelector () -metodi querySelectorAll () -menetelmällä eri valitsimissa, jolloin menetelmä löytää osuman ja palauttaa vähintään yhden vastaavan arvon määritetystä elementistä.