Sa JavaScript, ang ' querySelectorAll() Kinukuha ng paraan ang pinakaunang elemento na eksaktong tumutugma sa tinukoy na mga tagapili ng CSS. Ang pamamaraang ito ay nagsisimula sa pagtawid sa DOM tree upang maisagawa ang gawaing ito. Kapag nahanap na ang elemento, inilalapat nito ang mga built-in na katangian ng JavaScript o mga pamamaraan na tinukoy sa seksyon ng script upang magsagawa ng mga espesyal na gawain. Karaniwang ginagamit ang paraang ito upang piliin ang mga naka-target na elemento ayon sa mga kinakailangan. Nagbibigay-daan ito sa mga user na piliin ang lahat ng elementong tumutugma sa tinukoy na tagapili o sa partikular na inilagay sa ibinigay na index.
Inilalarawan ng gabay na ito ang paggamit ng pamamaraang “querySelectorAll()” sa JavaScript.
Paano Gamitin ang Paraang 'querySelectorAll()' sa JavaScript?
Upang gamitin ang ' querySelectorAll() ” paraan, tukuyin ang CSS selector bilang argument nito. Kasama sa mga tagapili ng CSS ang 'Uri, Klase, at id'. Kung hindi wasto ang CSS selector, nagbabalik ito ng syntax error, kung hindi, nagbabalik ito ng static na object ng NodeList bilang karaniwang output nito.
Syntax
document.querySelectorAll ( Mga tagapili ng CSS )
Sa syntax sa itaas, ang ' Mga tagapili ng CSS ” sumangguni sa lahat ng wastong tagapili ng CSS.
Gamitin natin ang natukoy na syntax sa itaas nang praktikal.
HTML Code
Pangkalahatang-ideya ng ibinigay na HTML code:
< h2 klase = 'demo' > Unang heading h2 >< h3 klase = 'demo' > Pangalawang heading h3 >
< p klase = 'demo' > Unang talata p >
< p klase = 'demo' > Pangalawang talata p >
< pindutan onclick = 'jsFunc()' > Pindutin dito ! pindutan >
Sa itaas na mga linya ng code:
- Ang ' Ang tag na ” ay nagdaragdag ng isang subheading na mayroong klase na “demo”.
- Ang ' Tinutukoy ng tag na ” ang pangalawang subheading na may parehong klase na pinangalanang “demo”.
- Ang ' Ang mga tag ay naka-embed sa mga pahayag ng talata na may parehong klase i.e., 'demo'.
- Ang ' Ang tag na ” ay may kasamang bagong button na may “onclick” na kaganapan ng mouse upang isagawa ang function na “jsFunc()”.
Tandaan: Ang partikular na HTML code ay sinusunod sa buong gabay na ito.
Halimbawa 1: Paglalapat ng “querySelectorAll()” na Paraan para Pumili ng Mga Elemento na May Parehong Klase at Baguhin ang Kanilang mga Kulay
Ang halimbawang ito ay gumagamit ng 'querySelectorAll()' na paraan upang piliin ang lahat ng mga elemento na gumagamit ng 'demo' na klase.
JavaScript Code
Tingnan natin ang nakasaad sa ibaba na code:
< script >function jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
para sa ( hayaan ako = 0 ; i < list.length; i++ ) {
listahan [ i ] .style.color = 'kahel' ;
}
}
script >
Sa mga linya ng code sa itaas:
- Ang ' jsFunc() ” function ay tinukoy.
- Sa kahulugan nito, ang 'listahan' na variable ay gumagamit ng ' querySelectorAll() ” na paraan para piliin ang lahat ng elementong may klase na “demo”.
- Susunod, ang ' para sa 'Nagsisimula ang loop ng isang listahan ng node upang umulit kasama ang lahat ng nahanap na elemento ng HTML na mayroong klase ' demo ” at baguhin ang kanilang kulay ng teksto gamit ang “ istilo.kulay ” ari-arian.
Output
Sa output sa itaas, makikita na ang kulay ng teksto ng mga elemento na binubuo ng parehong pangalan ng klase i.e., 'demo' ay nabago sa pag-click sa pindutan.
Halimbawa 2: Paglalapat ng “querySelectorAll()” na Paraan para Piliin ang Mga Tukoy na Na-index na Elemento
Bukod sa lahat ng elemento, maaari ding piliin ng user ang partikular na naka-index na elemento na mayroong class na 'demo'.
JavaScript Code
Isaalang-alang ang ibinigay na JavaScript code:
< script >function jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
listahan [ 0 ] .style.color = 'berde' ;
}
script >
Sa snippet ng code sa itaas:
- Pinipili ng variable na 'listahan' ang elementong 'h2' na ang klase ay 'demo' sa tulong ng ' querySelectorAll() ” paraan.
- Pagkatapos nito, tinutukoy ng variable na 'listahan' ang index ng elementong 'h2' upang baguhin ang kulay ng teksto ng elementong 'H2' na inilagay sa index na '0'.
Output
Ipinapakita ng output na ang kulay ng teksto ng elementong 'H2' na inilagay sa zero index ay may nabagong class na 'demo' sa pag-click sa pindutan.
Halimbawa 3: Paglalapat ng Paraang “querySelectorAll()” para Kunin ang Bilang ng Mga Elementong May Parehong Klase
Kinukuha ng halimbawang ito ang bilang ng mga elemento na may parehong klase gamit ang pamamaraang 'querySelectorAll()'.
HTML Code
Una, tingnan ang binagong HTML code ng 'Halimbawa 1':
< p id = 'para sa' > p >
Sa nakasaad sa itaas na HTML code, magdagdag ng walang laman na talata na may id na 'para' sa dulo ng 'Halimbawa 1' HTML code.
JavaScript Code
Ngayon, magpatuloy sa JavaScript code:
< script >function jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'para sa' ) .innerHTML = nodelist.length;
}
script >
Ayon sa snippet ng code sa itaas:
- Ang function na 'jsFunc()' ay unang pinipili ang lahat ng '
' na mga elemento gamit ang ' querySelectorAll() ” paraan.
- Pagkatapos nito, ang ' getElementById() Ang paraan ng ” ay ina-access ang idinagdag na walang laman na talata sa pamamagitan ng id nitong “para” upang idugtong ito ng ibinalik na halaga ng inilapat na “haba” na katangian.
Output
Gaya ng nakikita, ang output sa itaas ay nagpapakita ng kabuuang '4' na elemento na tumutugma sa tinukoy na CSS class selector na 'demo'.
Konklusyon
Ang ' querySelectorAll() ” na paraan ay madaling magamit sa pamamagitan ng pagtukoy sa CSS selector bilang halaga nito. Ang pamamaraang ito ay tumutugma sa bawat elemento ng HTML at pinipili ang mga tumutugma sa tinukoy na tagapili. Kapag napili ang mga elemento, ginagawa nito ang kinakailangang gawain sa mga ito na tinukoy sa seksyon ng script. Maikling inilalarawan ng gabay na ito ang paggamit ng pamamaraang “querySelectorAll()” sa JavaScript.