Ovaj vodič će pokazati različite metode odabira DOM elemenata u JavaScriptu.
Koji su različiti načini odabira DOM elemenata u JavaScriptu?
Koristite sljedeće metode za odabir DOM elemenata u JavaScriptu:
- metoda getElementById().
- metoda getElementsByClassName().
- metoda getElementsByTagName().
- querySelector() metoda
- metoda querySelectorAll().
Metoda 1: Odaberite DOM elemente pomoću metode “getElementById()”.
Za odabir DOM elemenata koristite ' getElementById() ” metoda na temelju dodijeljenog ID-a elementa. Ova metoda odabire jedan element prema njegovom jedinstvenom ' iskaznica ” atribut. Daje referencu na element s navedenim ID-om i vraća ' ništavan ” ako nije pronađen odgovarajući element.
Sintaksa
Koristite donju sintaksu za getElementById() metodu:
dokument. getElementById ( 'IDName' )
Ovdje, ' idName ” je naziv id atributa dodijeljenog elementu.
Primjer
U HTML datoteci stvorite dva naslova u elementu div pomoću ' h4 ” oznaka. Dodijelite ID-ove elementu div i elementima naslova 'h4' pod nazivom ' div ' i ' naslov ”, odnosno. Dodajte atribut stila elementu div da biste ga poravnali u sredini. Također, dodijelite klasu ' odjeljak ” na drugi naslov koji mijenja boju:
< div iskaznica = 'div' stil = 'text-align:center;' >< h4 iskaznica = 'naslov' > Pristupite DOM elementima korištenjem različitih metoda < / h4 >
< h4 razreda = 'odjeljak' iskaznica = 'naslov' > Odaberite DOM elemente u JavaScriptu pomoću metode 'getElementById()'
< / h4 >
< / div >
Sada ćemo dobiti ' div ' koristeći svoj dodijeljeni ID uz pomoć ' getElementById() ” metoda:
bio je getById = dokument. getElementById ( 'div' ) ;Ispiši element nasuprot ID-u ' div ” na konzoli:
konzola. log ( getById ) ;Može se vidjeti da je traženi HTML element uspješno dohvaćen:
Metoda 2: Odaberite DOM elemente koristeći metodu “getElementsByClassName()”
Također možete odabrati DOM element pomoću njegove dodijeljene klase uz pomoć ' getElementsByClassName() ” metoda. Odabire popis elemenata prema nazivu njihove klase. Izvodi živi HTMLCollection objekt, objekt sličan nizu koji sadrži sve elemente s navedenim nazivom klase.
Sintaksa
Za metodu 'getElementsByClassName()' koristi se sljedeća sintaksa:
dokument. getElementsByClassName ( “ime klase” )Primjer
Ovdje ćemo dobiti element koji sadrži klasu ' odjeljak ” i ispišite na konzoli:
bio je getByClass = dokument. getElementsByClassName ( 'odjeljak' ) ;konzola. log ( getByClass ) ;
Kao što možete vidjeti u izlazu, vratio se niz duljine 1 koji sadrži element ' h4 ' tko pripada razredu ' odjeljak ”:
Metoda 3: Odaberite DOM elemente pomoću metode “getElementsByTagName()”
U slučaju da elementu nije dodijeljen ID ili klasa, koristite ' getElementsByTagName() ” za dobivanje elementa prema nazivu oznake. Također vraća živi HTMLCollection objekt, koji je objekt sličan nizu koji sadrži sve elemente koji imaju navedeni naziv oznake.
Sintaksa
Slijedite zadanu sintaksu za odabir elemenata na temelju naziva oznake:
getElementsByTagName ( tagName )Primjer
Pozovite metodu “getElementsByTagName()” prosljeđivanjem naziva oznake “ h4 ”. Zatim ispišite popis elemenata koji odgovara navedenom nazivu oznake na konzoli:
bio je getByTag = dokument. getElementsByTagName ( 'h4' ) ;konzola. log ( getByTag ) ;
Izlaz
Metoda 4: Odaberite DOM elemente pomoću metode “querySelector()”.
Koristiti ' querySelector() ” za dobivanje DOM elementa. Odabire jedan element koji odgovara određenom CSS selektoru. Vraća prvi odgovarajući element pronađen u dokumentu. Ako se nijedan element ne podudara, daje se ' ništavan ”.
Sintaksa
Dolje navedena sintaksa koristi se za metodu 'querySelector()':
dokument. querySelector ( atribut )Ovdje je atribut CSS selektor, kao što je id ili klasa kao ' #Moj ID ” “ .moj razred “.
Primjer
Pozovite metodu 'querySelector()' i proslijedite ID ' #naslov ” da biste dobili elemente koji sadrže isti ID:
bio je getByquery = dokument. querySelector ( '#naslov' ) ;konzola. log ( getByquery ) ;
Daje prvi podudarni element kao izlaz:
Metoda 5: Odaberite DOM elemente pomoću metode “querySelectorAll()”.
Ako želite odabrati sve elemente koji sadrže navedeni atribut (id ili klasu), koristite ' querySelectorAll() ” metoda. Odabire popis elemenata koji odgovaraju određenom definiranom CSS selektoru. Daje objekt NodeList koji sadrži sve elemente u dokumentu koji odgovaraju određenom CSS selektoru.
Sintaksa
Koristite sljedeću sintaksu za dobivanje popisa elemenata:
dokument. querySelectorAll ( atribut )Primjer
Da biste dobili popis podudarnih elemenata koji sadrže ID ' naslov ' s ' querySelectorAll() ” metoda i ispis na elemente na konzoli:
bio je getByqueryAll = dokument. querySelectorAll ( '#naslov' ) ;konzola. log ( getByqueryAll ) ;
Izlaz
To je sve o odabiru DOM elemenata u JavaScriptu.
Zaključak
Za odabir DOM elemenata u JavaScriptu koristite ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', ili ' querySelectorAll() ” metoda. Ove metode pružaju različite načine odabira elemenata iz DOM-a na temelju njihovih jedinstvenih identifikatora, naziva klasa, naziva oznaka ili CSS selektora. Ovaj vodič demonstrira različite metode za odabir DOM elemenata u JavaScriptu.