Model objekta dokumenta (DOM) je strukturni prikaz HTML dokumenta. DOM je stablo čvorova koje preglednik stvara za svaku web stranicu na internetu.

DOM je objektno orijentiran. Svaki element u DOM-u ima svoj skup atributa i metoda kojima možete pristupiti pomoću JavaScripta.

U ovom članku vodiča naučit ćete kako koristiti funkcije DOM selektora za pristup elementima web stranice.

Kako pristupiti DOM elementima

Možete pristupiti vrhunskom DOM elementu web stranice putem globalnog objekta dokumenta. Na primjer, ako imate web stranicu kao što je sljedeća:

Dobrodošli


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hicccamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Oko


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hicccamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Članci



Naslov jedan članka





instagram viewer



 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hicccamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Čitaj više 





Naslov dva članka


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hicccamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Čitaj više 





Treći naslov članka


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hicccamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Čitaj više 





Naslov članka četiri


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hicccamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Čitaj više 

Tipkanje dokument u konzoli vašeg preglednika i pritiskom na enter proizvest će se sljedeći izlaz:

Izlaz u vašoj konzoli je interaktivan. Možete kliknuti na glava i tijelo elemente za njihovo proširenje. To će proizvesti sljedeći izlaz:

Svaki element odjeljka u tag je također proširiv. Ovisno o strukturi web stranice, elementi će se nastaviti širiti kako bi otkrili više elemenata. Ovo bi vam trebalo dati jasnije razumijevanje strukture DOM-a.

Povezano: Skriveni heroj web stranica: razumijevanje DOM-a

Objekt dokumenta ima posebno svojstvo, tijelo, koji predstavlja element tijela. Dakle, za pristup elementu tijela možete u konzolu upisati sljedeće:

dokument.tijelo

To će proizvesti sljedeći izlaz:

Ali ovo je ono što možete ići koristeći svojstva objekta. Svaka stranica ima glavu i tijelo, ali je inače jedinstvena. Dakle tipkanje dokument.tijelo.odjeljak ili bilo što slično jednostavno neće raditi kako biste željeli. Umjesto toga, postoje metode koje možete pozvati na objektu dokumenta za pristup određenim elementima.

Što su selektori DOM elemenata?

Selektori DOM elemenata su skupina JavaScript metoda koje možete koristiti na objektu dokumenta za pristup elementima na web stranici. Selektori DOM elemenata imaju dvije kategorije - jedan i višestruki selektor.

Ove funkcije djeluju na sličan način kao i CSS selektori. Omogućuju vam dohvaćanje elemenata na temelju naziva njihove oznake ili njihovog ID-a i atributa klase. Možete čak dohvatiti elemente koristeći bilo koji CSS selektor.

Povezano: Kako ciljati dio web stranice pomoću CSS selektora

Selektori jednog elementa su:

• getElementById()
• querySelector()

Selektori više elemenata su:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Selektor DOM elementa koji koristite ovisit će o elementu(ima) kojima pokušavate dobiti pristup.

Korištenje birača pojedinačnih DOM elemenata

Selektore ćete uglavnom vidjeti unutar JavaScript aplikacija. Dakle, odmaknimo se od konzole. Napravite JavaScript datoteku i povežite je sa svojom HTML datotekom pomoću sljedeće oznake skripte:

Gdje je vrijednost src naziv vaše JavaScript datoteke. Postavite ovu oznaku skripte neposredno prije svoje završne oznake tijela, .

The getElementById() metoda omogućuje pristup jednom elementu na web stranici koristeći vrijednost njegovog ID-a. U gornjem HTML dokumentu postoji nekoliko elemenata s ID-ovima. Za ciljanje razd element s ID-om “article-3” možete dodati sljedeći kod u svoju JavaScript datoteku:

vrijednost = document.getElementById('članak-3')

Sada element div s članak-3 ID i sva njegova odgovarajuća svojstva dostupna su iz vrijednost varijabla. Možete ispisati vrijednost varijabla na konzoli pomoću sljedećeg retka koda:

console.log (vrijednost)

Vidjet ćete naziv klase koji je dodijeljen elementu div, kao i druge važne atribute, kao što je unutarnji HTML.

Drugi selektor jednog elementa je querySelector(). Ova je funkcija svestranija jer joj možete proslijediti bilo koji CSS selektorski niz. Međutim, i dalje ga možete koristiti samo za odabir jednog po jednog elementa.

Na primjer, u gornjem HTML izgledu postoji jedna klasa - članci. Četiri elementa div koriste ovu klasu, ali querySelector() funkcija će vratiti samo prvi element koji ima klasu "articles".

Korištenje querySelector() s klasom

Dodajte sljedeći kod na kraj skripte:

vrijednost = document.querySelector('.članci')
console.log (vrijednost)

Ovo će vratiti samo prvu razd element s klasom "članci". Primijetite da navedete selektor u istom formatu kao i CSS selektor. U CSS-u, početna točka specificira naziv klase.

Korištenje querySelector() s ID-om

vrijednost = document.querySelector('#article-3')
console.log (vrijednost)

Ovaj će kod vratiti jedini element s ID-om "članak-3", treći razd element s klasom "članci". Opet, niz selektora koristi standardnu ​​CSS sintaksu, s a # simbol koji specificira ID.

Korištenje više birača DOM elemenata

Preostale funkcije selektora dohvaćaju grupe elemenata. Oni su getElementsByTagName(), getElementsByClassName(), i querySelectorAll().

Korištenje getElementsByTagName()

The getElementsByTagName() selektor dohvaća grupu elemenata s istim imenom oznake. Na primjer, ako želite odabrati sve h2 elemenata na web stranici, možete koristiti sljedeći kod:

vrijednost = document.getElementsByTagName('h2')
console.log (vrijednost)

Ovo pohranjuje sve h2 elemente u HTML kolekciju koja se zove vrijednost.

Korištenje getElementsByClassName()

The getElementsByClassName() selektor vraća kolekciju elemenata s istim imenom klase.

vrijednost = document.getElementsByClassName('članci')
console.log (vrijednost)

Umetanjem gornjeg koda u vašu JavaScript datoteku vratit će se četiri elementa div s nazivom klase "članci" u konzoli preglednika.

Korištenje querySelectorAll()

The querySelectorAll() metoda vraća popis čvorova svih elemenata koji odgovaraju zadanom selektoru. Za pristup svim elementima odlomaka u odjeljku bloga, možete koristiti sljedeći kod:

vrijednost = document.querySelectorAll('#blog p')
console.log (vrijednost)

Možete čak uključiti nekoliko selektora u niz, odvajajući svaki zarezom, baš kao u CSS-u:

vrijednost = document.querySelectorAll('h2, .articles')
console.log (vrijednost)

Koristite DOM birače za izradu dinamičkih web stranica

U ovom trenutku trebali biste imati jasno razumijevanje DOM-a i načina na koji radi. Također biste trebali znati različite pojedinačne i višestruke selektore, kao i kako ih koristiti.

Ipak, dobivanje pristupa HTML elementima samo je prvi korak u onome što možete učiniti s DOM selektorima. DOM selektori uvelike će vam pomoći da razvijete funkcionalne aspekte vaše web stranice, kao što je rukovanje događajima onclick i onscroll.

Kako svoju web stranicu učiniti responzivnom i interaktivnom uz CSS i JavaScript

Postavili ste svoju web stranicu s HTML-om i CSS-om, ali sada trebate dodati logiku. Evo što trebate učiniti.

Pročitajte dalje

O autoru