[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Sveučilište Harvard]
[Ovo je CS50.] [CS50.TV]
U ovom video ćemo pogledati DOM.
Prilikom preuzimanja preglednik web stranicu, to treba biti zastupljena u sjećanju neki način.
Model dokument objekt, ili DOM,
opisuje kako browser predstavlja web stranicu u memoriju.
U ovom videu, mi ćemo se pogled na DOM u kontekstu JavaScript,
ali DOM je jezik neovisan koncept.
Na primjer, PHP ima svoj DOM provedbu, kao dobro.
Međutim, DOM često koriste JavaScript
budući JavaScript nam omogućuje da promijenite sadržaj web stranice u letu,
DOM i omogućava nam pristup dijelovima web stranice.
Uzmimo za primjer pogledati web stranicu.
Ok, sad ćemo vidjeti kako će ova stranica biti predstavljeni u DOM.
I svako stablo treba imati root čvor na vrhu.
Za ovaj dokument, HTML element je korijen čvor
jer je prvi element koji se pojavljuje.
Dodajmo korijenski čvor na našem stablu.
Uzmimo pogled na HTML dokument ponovno.
Obavijest da je tijelo tag je smješteno unutar HTML oznake.
To znači da je tijelo element je dijete HTML elementa.
Mi može predstavljati to u našem DOM stabla čineći tijelo list
spušta s HTML.
Idemo to učiniti.
Imamo tijelo ispod HTML.
Sada možemo vidjeti da tijelo ima 2 djece svoje,
h1 element i ul elementa.
To znači da možemo spojiti oba od tih elemenata
na tijela elementa, pa neka je to učiniti.
Imamo H1 i Ul.
Konačno, ul. element ima tri više djece,
a to će se završiti naš DOM stablo, pa dodajmo Li, Li, Li.
Ovo dovrši našu DOM stablo, a to je kako je preglednik pohranu vaše web stranice.
Sada ćemo pogledati kako možemo proći ovo drvo koristeći JavaScript.
Možemo pristup ovom stablo koristeći poseban JavaScript varijablu zove dokument.
Jedan objekt ovog dokumenta objekta
je tijelo dobra, a to predstavlja predmet
Tijelo element u našem primjeru web stranice.
Ako bismo htjeli da se sva djeca iz tijela elementa,
što ako se sjećate da je H1 tag i ul tag,
možemo reći document.body.childNodes.
I to će nam dati natrag niz koji sadrži oba elementa h1
a ul elementa jer oni su oba izravna djeca tijelu.
Ako smo htjeli stvoriti varijablu predstavlja ul. elementa
možemo reći vrr ul = onda ovaj broj ovdje,
i sada, jer childNodes je jednostavno niz
možemo indeks u nju s [1] da biste dobili drugi element tog niza.
S ovom novom objektu ul možemo pristupiti raznim svojstva elementa kao i njegov ID.
Ako kažemo da je ul.id će biti jednak string popis
jer to je ono što imamo u našem HTML stranici.
Mi također mogu dobiti svoj tagName, što u ovom slučaju će biti
što tip elementa je, u ovom slučaju, ul.
Mi također mogu dobiti njegov roditelj ili čvor iznad njega, što je u ovom slučaju
će biti tijelo elementa.
Ako kažemo. ParentNode, koji će biti isti kao document.body.
Naravno, ovo ul. ima djecu za sebe,
tako da još uvijek možemo reći. childNodes na ovom elementu,
i ovaj niz sada bi trebao imati duljinu 3, jer postoje tri stavke u našem popisu.
Konačno, vjerojatno najkorisnija nekretnina će biti. InnerHTML,
a to će biti stvarni sadržaj popisa, koja je u našem primjeru stranici
bile one 3 Li oznake.
Naravno, ako imamo veliki dokument, pristup elemente
na taj način će biti jako težak, jer
na kraju ćemo morati reći stvari kao document.body.childNodes
Nosač nešto. childNodes noseći nešto drugo,
i to će se stvarno težak.
Umjesto toga ono što stvarno želite učiniti je biti u mogućnosti da upita dokument,
pa samo željeli smo tražili stvari na internetu pomoću ključnih riječi
mi stvarno treba neki način traži taj dokument jezgrovito
vratiti samo elementi mi je stalo, bez poprijeko
cijeli stablo vrha do dna.
Srećom, moderni preglednici omogućuju nam da to učinite
s posebnom funkcijom zove querySelectorAll,
i ova funkcija traje jedan argument
to je CSS selektora, a to će nam se vratiti
sve elemente koji se podudaraju taj izbornik.
To znači da ne trebate naučiti novu sintaksu za upite DOM.
Umjesto toga možete primijeniti znanje već znate
O CSS selektora.
Uzmimo pogled na neke primjere upite dokument.
Ako kažemo querySelectorAll i prođe ga na ovaj string # foo
to će nam vratiti element sa ID foo.
Također mogu reći document.getElementById
i prođe ga na string foo bez tog hashtag.
Ti ćeš se vratiti isto točno objekt.
Ako umjesto toga smo proći niz. Bar na document.querySelectorAll
ćemo vratiti sve elemente s razrednim traci.
Također možete kombinirati CSS selektora.
Ako prođemo u string # foo IMG
koji će nas vratiti sve slike elemenata
da su djeca elementa sa ID foo.
Kao što možete vidjeti, spajanjem selektora imamo neke doista snažne mogućnosti pretraživanja.
No, ispod poklopca motora, DOM je zapravo samo stablo,
i ove selektora nam omogućiti da sažetak koji odlazi u određenoj mjeri
jer mi ne uvijek stalo do cijele strukture DOM stabla.
To je brz pregled DOM, i hvala nam se pridružili.
[CS50.TV]