QuerySelector ir JavaScript metode, kurai ir būtiska loma elementu meklēšanā.
Šajā sadaļā mēs sapratīsim un apspriedīsim querySelector () metodi, tās izmantošanu, kā arī apskatīsim piemēru, lai praktiski izprastu querySelector () metodes jēdzienu.
Iepazīstinām ar JavaScript querySelector () metodi
Elementu saskarnes metode, kas ļauj meklēt un atgriezt pirmo elementu dokumentā. Tas atrod elementu, kas atbilst jebkuram no norādītajiem CSS atlasītājiem vai atlasītāju grupai. Tomēr, ja neviens atbilstošs elements netiek atrasts, tas atgriež nulli. Metode querySelector () ir tikai dokumenta saskarnes metode. Dokumenta saskarne ir saskarne, kas apraksta izplatītās metodes, kā arī rekvizītus jebkuram html , XML vai jebkura cita veida dokumentam.
Kā querySelector () metode veic meklēšanu
Mēs zinām, ka elementu meklēšanai var izmantot dažādus meklēšanas veidus. Tomēr tiek izmantota metode querySelector (). dziļums pirmais priekšpasūtījums dokumenta mezglu šķērsošana. Tajā šķērsošana sākas ar pirmo elementu dokumenta marķējumā un pēc tam šķērso secīgos mezglus pēc pakārtoto mezglu skaita.
git statuss -s
Sintakse
element = document.querySelector(selectors);
Metode querySelector () ir dokumenta saskarnes metode, un tāpēc tai ir šāda sintakse.
Tam ir viens parametrs “selectors”, kas ir DOM virkne, un tam ir viens vai vairāki derīgi CSS atlasītāji.
Atgriešanas veids
Tas var atgriezt vērtību “null”, ja atbilstība netiek atrasta, un, ja pirmais elements atbilst norādītajiem CSS atlasītājiem (ja tādi ir), tas atgriezīs šo elementu.
Tomēr, ja nav neviena derīga CSS atlasītāja, tas parādīs sintakses kļūdas izņēmumu.
Tagad, pirms aplūkot īstenošanas piemēru, mums vajadzētu uzzināt par dažādiem CSS atlasītāju veidiem. Ja nezināt, apmeklējiet mūsu https://www.javatpoint.com/css-selector CSS apmācības sadaļa.
Tātad, tagad mēs ieviesīsim piemēru, saskaņā ar kuru mēs aptversim CSS atlasītāju un saglabāsim tā pirmā elementa vērtību, izmantojot querySelector () metodi.
querySelector () ieviešana Piemērs
Tālāk ir sniegts koda piemērs, kas ļaus mums saprast querySelector () metodes darbību:
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);
Tagad jūs varat redzēt atšķirību starp kodu, ka pirmajā piemērā mēs izmantojām querySelector () metodi, un tas izvadīja tikai pirmo atbilstošo atlasītāja vērtību. Bet, novērojot šī otrā piemēra izvadi, jūs redzēsit, ka tas ir atgriezis visas atbilstošās vērtības norādītajiem atlasītājiem vai atlasītāju grupai. Iepriekš minētā koda izvade ir parādīta zemāk:
Koda skaidrojums
skenera skenēšana java
- Iepriekš minētais kods ir html un JavaScript kombinācija.
- Kodā esam ieviesuši dažādus CSS atlasītājus.
- JavaScript sadaļā esam izmantojuši metodi querySelectorAll () un izsaucuši CSS elementu atlasītāju.
- Tātad metode querySelectorAll () tagad pāriet uz kodu, lai to pārvietotu, izmantojot iepriekšējas pasūtīšanas metodi Depth-first, un atgriež visas atbilstošās elementu vērtības, kas norādītas kā querySlectorAll () metodes parametri.
Tādā pašā veidā mēs varam izmantot metodi querySelectorAll () arī dažādiem citiem CSS atlasītāju veidiem, un tā atgriezīs visas atlasītāju atbilstošās vērtības, kas norādītas kā arguments. Lai ieviestu metodi, aizstājiet metodi querySelector () ar metodi querySelectorAll () dažādiem atlasītājiem, un metode atradīs atbilstību un atgriezīs vismaz vienu atbilstošo norādītā elementa vērtību.