Objektni model dokumenta (DOM) je strukturna predstavitev dokumenta HTML. DOM je drevo vozlišč, ki jih brskalnik ustvari za vsako spletno stran na internetu.

DOM je objektno usmerjen. Vsak element v DOM ima svoj nabor atributov in metod, do katerih lahko dostopate s pomočjo JavaScripta.

V tem članku vadnice se boste naučili, kako uporabljati funkcije izbirnika DOM za dostop do elementov spletne strani.

Kako dostopati do elementov DOM

Do elementa DOM najvišje ravni spletne strani lahko dostopate prek globalnega predmeta dokumenta. Na primer, če imate spletno stran, kot je naslednja:

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.




O


 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.







instagram viewer



Članki



Prvi 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.


 Preberi več 





Drugi 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.


 Preberi več 





Tretji 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.


 Preberi več 





Naslov četrtega č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.


 Preberi več 

Tipkanje dokument v konzoli brskalnika in s pritiskom na enter boste dobili naslednji izhod:

Izhod v vaši konzoli je interaktiven. Lahko kliknete na glavo in telo elemente za njihovo razširitev. S tem boste ustvarili naslednji izhod:

Vsak element odseka v oznaka je tudi razširljiva. Glede na strukturo spletne strani se bodo elementi širili in razkrili več elementov. To bi vam moralo omogočiti jasnejše razumevanje strukture DOM-a.

Povezano: Skriti junak spletnih mest: razumevanje DOM-a

Objekt dokumenta ima posebno lastnost, telo, ki predstavlja element telesa. Torej, za dostop do elementa telesa lahko v konzolo vnesete naslednje:

dokument.telo

To bo ustvarilo naslednji izhod:

Toda to je največ, kar lahko dosežete z uporabo lastnosti predmeta. Vsaka stran ima glavo in telo, sicer pa je edinstvena. Torej tipkanje dokument.telo.razdelek ali kaj podobnega preprosto ne bo delovalo, kot bi si želeli. Namesto tega obstajajo metode, ki jih lahko pokličete na objektu dokumenta za dostop do določenih elementov.

Kaj so izbirniki elementov DOM?

Izbirniki elementov DOM so skupina metod JavaScript, ki jih lahko uporabite na objektu dokumenta za dostop do elementov na spletni strani. Izbirniki elementov DOM imajo dve kategoriji – enojni in več izbirnikov.

Te funkcije delujejo podobno kot selektorji CSS. Omogočajo vam pridobivanje elementov na podlagi njihovega imena oznake ali njihovega ID-ja in atributov razreda. Elemente lahko celo pridobite s katerim koli izbirnikom CSS.

Povezano: Kako ciljati na del spletne strani z uporabo izbirnikov CSS

Izbirniki posameznih elementov so:

• getElementById()
• querySelector()

Izbirniki več elementov so:

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

Izbirnik elementov DOM, ki ga uporabljate, bo odvisen od elementov, do katerih poskušate pridobiti dostop.

Uporaba izbirnikov posameznih elementov DOM

Izbirnike boste večinoma videli v aplikacijah JavaScript. Torej, odmaknimo se od konzole. Ustvarite datoteko JavaScript in jo povežite s svojo datoteko HTML z naslednjo oznako skripta:

Kjer je vrednost src ime vaše datoteke JavaScript. Postavite to oznako skripta tik pred zaključno oznako telesa, .

The getElementById() metoda omogoča dostop do enega samega elementa na spletni strani z uporabo vrednosti njegovega ID-ja. V zgornjem dokumentu HTML je več elementov z ID-ji. Za ciljanje na razdel element z ID-jem »article-3« lahko v datoteko JavaScript dodate naslednjo kodo:

vrednost = document.getElementById('article-3')

Zdaj element div z člen-3 ID in vse njegove ustrezne lastnosti so dostopne iz vrednost spremenljivka. Lahko natisnete vrednost spremenljivka v konzolo z uporabo naslednje vrstice kode:

console.log (vrednost)

Videli boste ime razreda, ki je dodeljeno elementu div, in druge pomembne atribute, kot je notranji HTML.

Drugi izbirnik posameznega elementa je querySelector(). Ta funkcija je bolj vsestranska, saj ji lahko posredujete kateri koli izbirni niz CSS. Še vedno pa ga lahko uporabite samo za izbiro enega elementa naenkrat.

Na primer, v zgornji postavitvi HTML je en razred – članki. Štirje elementi div uporabljajo ta razred, vendar querySelector() funkcija bo vrnila samo prvi element, ki ima razred "articles".

Uporaba querySelector() z razredom

Na konec skripta dodajte naslednjo kodo:

vrednost = document.querySelector('.articles')
console.log (vrednost)

To bo vrnilo samo prvo razdel element z razredom »članki«. Upoštevajte, da izberete izbirnik v isti obliki kot izbirnik CSS. V CSS vodilna pika določa ime razreda.

Uporaba querySelector() z ID-jem

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

Ta koda bo vrnila edini element z ID-jem »člen-3«, tretji razdel element z razredom »članki«. Spet izbirni niz uporablja standardno sintakso CSS z a # simbol, ki določa ID.

Uporaba več izbirnikov elementov DOM

Preostale izbirne funkcije pridobijo skupine elementov. so getElementsByTagName(), getElementsByClassName(), in querySelectorAll().

Uporaba getElementsByTagName()

The getElementsByTagName() izbirnik pridobi skupino elementov z istim imenom oznake. Na primer, če želite izbrati vse h2 elementov na spletni strani, lahko uporabite naslednjo kodo:

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

To shrani vse elemente h2 v zbirko HTML, imenovano vrednost.

Uporaba getElementsByClassName()

The getElementsByClassName() selektor vrne zbirko elementov z istim imenom razreda.

vrednost = document.getElementsByClassName('članki')
console.log (vrednost)

Če vstavite zgornjo kodo v datoteko JavaScript, boste v konzoli brskalnika vrnili štiri elemente div z imenom razreda »članki«.

Uporaba querySelectorAll()

The querySelectorAll() metoda vrne seznam vozlišč vseh elementov, ki se ujemajo z danim izbirnikom. Za dostop do vseh elementov odstavka v razdelku spletnega dnevnika lahko uporabite naslednjo kodo:

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

V niz lahko celo vključite več izbirnikov, pri čemer vsakega ločite z vejico, tako kot v CSS:

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

Uporabite izbirnike DOM za ustvarjanje dinamičnih spletnih strani

Na tej točki bi morali jasno razumeti DOM in kako deluje. Prav tako bi morali poznati različne enojne in več izbirnike ter kako jih uporabljati.

Kljub temu je pridobitev dostopa do elementov HTML le prvi korak v tem, kaj lahko storite s selektorji DOM. Izbirniki DOM vam bodo v veliko pomoč pri razvoju funkcionalnih vidikov vašega spletnega mesta, kot je upravljanje dogodkov onclick in onscroll.

Kako narediti vaše spletno mesto odzivno in interaktivno s CSS in JavaScript

Svoje spletno mesto ste nastavili s HTML in CSS, zdaj pa morate dodati logiko. Tukaj je, kaj morate storiti.

Preberite Naprej

O avtorju