Ta vadnica bo prikazala različne metode za izbiro elementov DOM v JavaScriptu.
Kakšni so različni načini izbire elementov DOM v JavaScriptu?
Uporabite naslednje metode za izbiro elementov DOM v JavaScriptu:
- metoda getElementById().
- metoda getElementsByClassName().
- metoda getElementsByTagName().
- metoda querySelector().
- metoda querySelectorAll().
1. način: izberite elemente DOM z uporabo metode »getElementById()«.
Za izbiro elementov DOM uporabite » getElementById() ” na podlagi ID-ja, dodeljenega elementu. Ta metoda izbere posamezen element po njegovem edinstvenem ' id ” atribut. Poda sklic na element z navedenim ID-jem in vrne ' nič ”, če ni najden noben ustrezen element.
Sintaksa
Za metodo getElementById() uporabite spodnjo sintakso:
dokument. getElementById ( 'idName' )
Tukaj je ' idName ” je ime atributa id, dodeljenega elementu.
Primer
V datoteki HTML ustvarite dva naslova v elementu div z uporabo » h4 ' oznaka. Dodelite ID-je elementu div in elementom naslovov »h4« z imenom » div « in » naslov «, oz. Dodajte atribut style elementu div, da ga poravnate na sredino. Dodelite tudi razred ' razdelek ” na drugi naslov, ki spremeni barvo:
< div id = 'div' stil = 'text-align:center;' >< h4 id = 'naslov' > Dostop do elementov DOM z uporabo različnih metod < / h4 >
< h4 razred = 'odsek' id = 'naslov' > Izberite elemente DOM v JavaScriptu z uporabo metode 'getElementById()'
< / h4 >
< / div >
Zdaj bomo dobili ' div ' z uporabo dodeljenega ID-ja s pomočjo ' getElementById() ” metoda:
je bil getById = dokument. getElementById ( 'div' ) ;Natisnite element proti ID-ju ' div « na konzoli:
konzola. dnevnik ( getById ) ;Vidimo lahko, da je bil zahtevani element HTML uspešno pridobljen:
2. način: izberite elemente DOM z metodo »getElementsByClassName()«
Element DOM lahko izberete tudi z uporabo dodeljenega razreda s pomočjo ' getElementsByClassName() ” metoda. Izbere seznam elementov po imenu razreda. Izpiše živi objekt HTMLCollection, objekt podoben matriki, ki vsebuje vse elemente z navedenim imenom razreda.
Sintaksa
Za metodo »getElementsByClassName()« se uporablja naslednja sintaksa:
dokument. getElementsByClassName ( “ime razreda” )Primer
Tukaj bomo dobili element, ki vsebuje razred ' razdelek ” in natisnite na konzoli:
je bil getByClass = dokument. getElementsByClassName ( 'odsek' ) ;konzola. dnevnik ( getByClass ) ;
Kot lahko vidite v izhodu, je vrnjena matrika dolžine 1, ki vsebuje element ' h4 'kdo spada v razred' razdelek ”:
3. način: izberite elemente DOM z metodo »getElementsByTagName()«
Če elementu ni dodeljen ID ali razred, uporabite » getElementsByTagName() ” za pridobitev elementa po njihovem imenu oznake. Vrne tudi živi objekt HTMLCollection, ki je objekt podoben matriki, ki vsebuje vse elemente, ki imajo navedeno ime oznake.
Sintaksa
Sledite podani sintaksi za izbiro elementov na podlagi imena oznake:
getElementsByTagName ( tagName )Primer
Prikličite metodo »getElementsByTagName()« s posredovanjem imena oznake » h4 ”. Nato natisnite seznam elementov, ki se ujemajo z navedenim imenom oznake na konzoli:
je bil getByTag = dokument. getElementsByTagName ( 'h4' ) ;konzola. dnevnik ( getByTag ) ;
Izhod
4. način: Izberite elemente DOM z uporabo metode »querySelector()«.
Uporabi ' querySelector() ” za pridobitev elementa DOM. Izbere en element, ki se ujema z določenim izbirnikom CSS. Vrne prvi ujemajoči se element, najden v dokumentu. Če se noben element ne ujema, daje ' nič ”.
Sintaksa
Spodaj omenjena sintaksa se uporablja za metodo »querySelector()«:
dokument. querySelector ( atribut )Tukaj je atribut izbirnik CSS, kot je ID ali razred kot ' #myId ” “ .moj razred “.
Primer
Pokličite metodo 'querySelector()' in posredujte ID ' #naslov «, da dobite elemente, ki vsebujejo isti ID:
je bil getByquery = dokument. querySelector ( '#naslov' ) ;konzola. dnevnik ( getByquery ) ;
Kot rezultat daje prvi ujemajoči se element:
5. način: Izberite elemente DOM z uporabo metode »querySelectorAll()«.
Če želite izbrati vse elemente, ki vsebujejo podani atribut (id ali razred), uporabite “ querySelectorAll() ” metoda. Izbere seznam elementov, ki se ujemajo z določenim definiranim izbirnikom CSS. Poda objekt NodeList, ki vsebuje vse elemente v dokumentu, ki se ujemajo z določenim izbirnikom CSS.
Sintaksa
Za pridobitev seznama elementov uporabite naslednjo sintakso:
dokument. querySelectorAll ( atribut )Primer
Če želite pridobiti seznam ujemajočega se elementa, ki vsebuje ID ' naslov ' z ' querySelectorAll() ” in izpis na elementih na konzoli:
je bil getByqueryAll = dokument. querySelectorAll ( '#naslov' ) ;konzola. dnevnik ( getByqueryAll ) ;
Izhod
To je vse o izbiri elementov DOM v JavaScriptu.
Zaključek
Za izbiro elementov DOM v JavaScriptu uporabite » getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', ali ' querySelectorAll() ” metoda. Te metode zagotavljajo različne načine izbiranja elementov iz DOM na podlagi njihovih edinstvenih identifikatorjev, imen razredov, imen oznak ali izbirnikov CSS. Ta vadnica je prikazala različne metode za izbiro elementov DOM v JavaScriptu.