„QuerySelector“ yra „JavaScript“ metodas, kuris atlieka gyvybiškai svarbų vaidmenį ieškant elementų.
Šiame skyriuje mes suprasime ir aptarsime querySelector () metodą, jo naudojimą, taip pat peržvelgsime pavyzdį, kad praktiškai suprastume querySelector () metodo sampratą.
Pristatome JavaScript querySelector () metodą
Elementų sąsajos metodas, leidžiantis ieškoti ir grąžinti pirmąjį dokumento elementą. Jis suranda tą elementą, kuris atitinka bet kurį iš nurodytų CSS parinktuvų arba parinkėjų grupės. Tačiau jei nerandamas atitinkantis elementas, jis grąžina nulį. querySelector () metodas yra tik dokumento sąsajos metodas. Dokumento sąsaja yra sąsaja, aprašanti bendrus metodus ir bet kurio html , XML ar bet kokio kito dokumento ypatybes.
Kaip querySelector () metodas atlieka paiešką
Žinome, kad yra įvairių tipų paieškų, kurias galima naudoti ieškant elementų. Tačiau naudojamas querySelector () metodas gylis-pirmas išankstinis užsakymas dokumento mazgų perėjimas. Jame perėjimas pradedamas nuo pirmojo elemento dokumento žymėjime, o tada eina per nuoseklius mazgus pagal antrinių mazgų skaičių.
prižiūrimas mašininis mokymasis
Sintaksė
element = document.querySelector(selectors);
querySelector () metodas yra dokumento sąsajos metodas, todėl jis turi tokią sintaksę.
Jis turi vieną parametrą „selectors“, kuris yra DOM eilutė ir turi vieną ar kelis galiojančius CSS parinkiklius.
Grąžinimo tipas
Jis gali grąžinti „null“, jei nerasta atitikties, ir jei pirmasis elementas atitinka nurodytus CSS parinkiklius (jei yra), jis grąžins tą elementą.
sąjunga prieš sąjungą visi
Tačiau jei nėra galiojančio CSS parinkiklio, jis išmes išimtį „SyntaxError“.
Dabar, prieš žiūrėdami į įgyvendinimo pavyzdį, turėtume žinoti apie įvairius CSS parinktuvų tipus. Jei nežinote, apsilankykite mūsų https://www.javatpoint.com/css-selector CSS mokymo programos skyrių.
Taigi, dabar įgyvendinsime pavyzdį, pagal kurį apimsime CSS parinkiklį ir išsaugosime jo pirmąją elemento reikšmę naudodami querySelector () metodą.
querySelector () įgyvendinimas Pavyzdys
Žemiau pateikiamas kodo pavyzdys, kuris leis mums suprasti querySelector () metodo veikimą:
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);
Dabar galite pamatyti skirtumą tarp kodo, kad pirmame pavyzdyje mes naudojome querySelector () metodą, ir jis išvedė tik pirmąją atitinkančią parinkiklio reikšmę. Bet kai stebėsite šio antrojo pavyzdžio išvestį, pamatysite, kad jis grąžino visas atitinkamas nurodytų parinktuvų ar parinktuvų grupės vertes. Aukščiau pateikto kodo išvestis parodyta žemiau:
Kodo paaiškinimas
- Aukščiau pateiktas kodas yra html ir JavaScript derinys.
- Kode įdiegėme skirtingus CSS parinkiklius.
- „JavaScript“ skiltyje panaudojome querySelectorAll () metodą ir iškvietėme CSS elementų parinkiklį.
- Taigi, metodas querySelectorAll () dabar perkeliamas į kodą, skirtą jo perėjimui naudojant išankstinio užsakymo metodą „Gylis pirmas“, ir grąžina visas atitinkančias elementų reikšmes, kurios nurodytos kaip querySlectorAll () metodo parametrai.
Taigi lygiai taip pat galime naudoti querySelectorAll () metodą įvairiems kitiems CSS parinktuvų tipams, ir jis pateiks visas atitinkančias parinktuvų reikšmes, kurios nurodytos kaip argumentas. Norėdami įgyvendinti metodą, pakeiskite metodą querySelector () metodu querySelectorAll () įvairiems selektoriams, o metodas suras atitikmenį ir grąžins bent vieną atitinkamą nurodyto elemento reikšmę.