Doug LLOYD: V tem videu, smo želeli klicati ločeno pozornost v zelo zlasti element JavaScript da boste morda ugotovili, priročen ko ste začeli za delo na manipulacijo spletnih strani in spreminjajo vsebino vaše spletne strani na letenje. In da je pojem Document Object Model. Torej, kot smo videli v našem videu na JavaScript, predmeti so zelo prilagodljivi. In lahko vsebujejo različne polj. In čeprav mi ni šel v veliko Natančneje, ta polja ali lastnosti, da bi mi verjetno bolj jih ustrezno pokličite v okviru predmeta, celo te lastnosti so lahko druge predmete. In znotraj teh predmetov lahko drugi predmeti. 

Imate to zelo velik objekt z veliko drugih predmetov znotraj nje, ki nekako ustvarja ta zamisel o velikem drevesu. Sedaj predmet dokument je zelo poseben predmet v JavaScript da organizira svoj celoten splet stran v te vrste dežnik predmeta. Tako znotraj dokumenta Objekt so predmeti, ki predstavljajo glava in telo vaše spletne strani. 

Znotraj te so drugi predmeti, et cetera, et cetera, dokler ima vaše celotno spletno stran bil organiziran v tem velikem objektu. Kaj je narobe tukaj, kajne? No, vemo, kako delati s predmeti v JavaScriptu. 

Torej, če imamo nek predmet, ki se nanaša na naše celotno spletno stran, da pomeni ga kliče pravilna metode za manipulacijo, da je predmet ali spreminjanje nekaterih njegovih lastnosti, bomo lahko spremenite elemente Naša stran programsko uporabo JavaScript namesto ob kodo stvari z, recimo, HTML. Torej, tukaj je primer zelo preprosta spletna stran, kajne? Ima HTML oznake, glavo. 

Znotraj je naziv, zdravo svet. Potem imam telo. Znotraj, da imam tri različne stvari. Imam h2 header tag je, odstavek, in povezava. To je zelo preprosta spletna stran. 

No, kaj bi lahko bil dokument ugovarja ta izgledal? No, to je malo strašno morda na prvi. Ampak to je res samo velik drevo. In na samem korenu to je dokument. 

Notranjost je dokument drugo Objekt se nanašajo na HTML moji strani. In HTML moje strani je vse to. In nato znotraj HTML objekt, imam predmet glavo, ki se nanaša na vse, kar je tam. 

In znotraj tam, Imam naziv predmeta. In notranjost tam, imam drugo ugovarja, da je samo zdravo svet. Lahko bi moje telo predstavljal takole. 

Znotraj mojega telesa, imam H2 Predmet in p objekt za odstavku in a objekt za povezavo. In tako je ta celotna hierarhija lahko predstavimo kot velik drevo z veliko manjšim Littleom Stvari, ki prihajajo iz nje. Zdaj, seveda, ko bomo programiranje, smo Ne verjamem, da stvari, kot velika drevesa. Želimo si, da dejansko kode, povezane stvari. 

In na srečo, smo lahko uporabo naših Orodja za razvijalce dejansko si oglejte Ta spletna stran je dokument objekt. In kaj je to. Tako sem odprl zavihek brskalnika. 

In sem odprla Orodja za razvijalce. In v mojem video na JavaScript, I omeniti, da je konzola ne samo nekam kjer tiskamo informacije, to je tudi kraj, kjer smo lahko vhodni podatki. V zvezi s tem, kaj Jaz sem hotel reči je Rad bi, da bi dobili nazaj predmeti dokument, tako da sem lahko začnete, da imajo pogled na to. Torej, kako bi jaz to naredil? No, če želim organizirati res lepo, Jaz bom rekel, console.dir, D-I-R. Zdaj ga uporabljam console.log za samo tiskanje ven nekaj zelo preprosta. Ampak, če želim, da organizirajo to hierarhično kot predmeta, Hočem, da nekako strukturirana podobno strukturo imenika. 

Torej, želim console.dir dokument. Bom udaril Enter. In tik pod njo zdaj, in bom povečavo tukaj, Imam ta dokument odzivni z malo puščico zraven njega. Zdaj, ko sem odprl to puščico, tam se dogaja, da je veliko stvari. 

Ampak bomo prezreti veliko za to in samo nekako poudarkom na najbolj pomemben del, zato smo lahko začnete navigacijo ta dokument. Tam je veliko več DOM kot Samo matična vozlišča in otrok vozlišča. Tam je veliko pomožne stvari. 

Torej bom to odprli. In tam je cel kup stvari, ki pops up. Ampak vse mi je mar, je tukaj, otrok vozlišča. Odprimo da gor. 

Znotraj tam vidim nekaj, kar poznajo, HTML. Tako znotraj našega dokumenta eno raven navzdol, HTML. Odprem, da je gor. Kaj smo pričakovali? 

Če se spomnite iz našega diagrama, kaj bi morali najti znotraj HTML? Kakšne dva vozlišča so pod njo na drevesu? Poglejmo izvedeti. Smo odprli HTML. Gremo navzdol do svojih otrok vozlišča. 

Pop, da odprti. Tam je glava in telo. In bomo lahko odprli glavo. Pojdi na svojih otrok vozlišča. No, tam je naslov. 

In še bi lahko naštevali in na, kot je ta večno. Mi lahko to storite s telesom, kot dobro. Vendar pa je način za nas, da pogled na dokument organizirana kot velik objekt. In če pogledamo, je velik objekt, ki izgleda veliko kot kodo, to pomeni, da lahko začnemo manipulirati ta velik objekt z uporabo koda za spremembo, kakšna je naša Spletna stran izgleda in se počuti kot. 

Tako da je zelo močno orodje imamo na razpolago sedaj. Torej, kot smo pravkar videli je sam dokument predmet in vse predmete znotraj njega imajo lastnosti in metode, samo kot vsak drug predmet, ki smo jih bilo delo z v JavaScript. Vendar smo lahko uporabite te lastnosti in uporaba teh metod nekako vrtati navzdol iz velikih dokumenta in dobili nižje in nižje in nižje, lepši in lepši zrna podrobnosti, dokler ne bomo priti na zelo poseben kos naše Spletna stran, ki želimo spremeniti. 

In ko smo posodobiti lastnosti Document Object ali pokličite teh metod, Stvari bi se lahko zgodilo na naši spletni strani. In mi ni treba storiti vse osvežujoč da so te spremembe začele veljati. 

In to je zelo kul sposobnost imajo, ko delamo s kodo. Torej, kaj so nekateri od teh lastnosti ki so del dokumenta objekta? No, ste verjetno videl Nekaj ​​od njih res hitro kot smo stiskanje skozi velikan dokument Objekt smo pravkar videli v spletnem brskalniku. 

Toda nekaj teh lastnosti lahko stvari, kot so notranji HTML. In morda celo me spomni to uporabljati v videu JavaScript na samem koncu, ko sem je govoril o dogodkih. Kaj je to notranja HTML? No, to je samo tisto, kar je med oznakami. 

In tako notranja HTML, na primer naslova tag, če smo bo ohranil v da na primer pred nekaj trenutki, bi bilo zdravo svet. Da je bil naslov naše strani. Ostale lastnosti vsebovati ime vozlišča, ki je ime HTML element, kot je naslov. ID, ki je osebna atribut HTML elementa. 

Spomnimo se, da smo lahko posebej navede, Posebni elementi našega HTML z ID atribut, ki je običajno pride prav v okviru CSS, posebej. Parent vozlišče, ki je sklic kaj je samo gor nad mano v DOM. In otrok vozlišča, ki je Sklicevanje na to, kar je navzdol pod mano. In smo videli veliko, ki samo gledaš skozi. Otroška vozlišča, to je, kako smo dobili nižje in nižje v drevesu. 

Atribute, da je samo niz od atributov HTML elementa. Torej primer atributov morda biti, če imate oznako slike, običajno ima vir atribut, morda višina in širina atribut. In tako, da bi bili samo niz vseh atributov povezanih s to HTML elementa. 

Style je še eden, ki ne predstavljajo CSS styling posameznega elementa. In kasneje v tem video, bomo posebej vzvod slog, da bi nekaj sprememb na naši spletni strani. Torej, to so nekatere lastnosti. 

In tam so tudi nekateri Metode, ki jih lahko uporabite za bolj hitro mogoče izolirati elementi Document Object. Morda je najbolj vsestranski se ti getElementById. Torej lahko rečem nekaj podobnega, saj ne pozabite, da je metoda dokumenta Ugovarja, document.getElementById. 

In znotraj teh oklepajev, navedite HTML element s posebnim ID pripisujejo, da sem prej imel nastaviti, in bom takoj gremo desno do tega elementa celotne spletne strani. Torej, jaz ne bi bilo treba morda vrtanje navzdol skozi vsako posamezno plast. Jaz lahko samo uporabite ta način, da ga najdejo, nekako kot toplota, ki išče raket, prav? To gre samo in najde točno to, kar je iskal. 

GetElementsByTagName je Zelo podobno v duhu. Mogoče bi to ugotovili vse krepko oznake ali vse p oznak in mi paleto vsega da sem lahko potem delati. appendChild dodaja nekaj eno raven navzdol v drevesu. 

Tako sem lahko dodate celoten Novo element nižja za eno stopnjo. Ali lahko odstranim element, ki je eno stopnjo nižja, kot tudi, če želim izbrisati nekaj iz moje spletne strani. Zdaj pa hitro kodiranje note in hitro prihranek glavobol seznanjen, upajmo. 

getElementById-- D je z malimi tiskanimi črkami. Ne morem vam povedati, koliko krat sem Rabljeni getElementById in kapitalizirane D tam. Ker to je res pogosti. Če smo napisali besedo ID, to je običajno kapital I kapital D. In moja koda ne dela. In ne morem ugotoviti, zakaj. To je res, res, res pogosta napaka, da vsakdo naredi, celo strokovnjaki, ki imajo bil to za vedno. Torej, samo zavedati, getElementById, da d je z malimi tiskanimi črkami. In upajmo, da vam prihrani več minut pri najmanj bolečino. 

Torej, kaj vse nam to pove? Imamo te metode. Imamo te lastnosti. Zdaj, če začnemo od dokument, listina. karkoli, lahko sedaj dobite katerokoli en kos naši spletni strani da želimo, da uporabo JavaScript Samo s klicem te metode in vplivno lastnosti da smo našli na različnih lokacijah. 

To lahko dobite Razvučen, to document.getElementById, Mogoče imajo dolgo ime oznake, Morda vam več klicev kasneje. Stvari lahko dobili malo Razvučen. In kot programerji, kot ste verjetno opazili v mnogih od teh videoposnetkov, ne maramo Razvučen stvari. 

Radi bi biti sposoben narediti stvari hitro. Zato bi želeli bolj jedrnat način, da nekaj reči. Torej, to nekako vodi do pojem nečesa imenuje jQuery. Zdaj jQuery ni JavaScript. To ni del JavaScript. 

To je knjižnica, ki je napisana nekateri programerji JavaScript pred približno 10 leti. In njen cilj je poenostaviti to, kaj je imenujemo odjemalec side skripte, ki je v bistvu tisto, kar smo pravkar govoriš s DOM manipulacijami. In zato, če sem hotel, da spremenite Barva ozadja moji spletni strani, morda posebno Div. 

Tukaj sem očitno že ElementById colorDiv. In želim, da nastavite barvo ozadja. Če sem le uporabo čistega JavaScript pomočjo Document Object Model, da je veliko stvari, kajne? document.getElementById colorDiv.style.backgroundColor = zelena. 

Uh. To je bilo veliko za povedati. To je veliko, da tip, preveč. In tako v jQuery, bomo lahko morda rekli to malo bolj jedrnato. Kompromis je da je morda malo malo bolj skrivnosten naenkrat, prav? 

Vsaj je dolg malo bolj pojasnili, kaj počnemo. Ta znak za dolar, oklepaji, enojni narekovaj, hash, colorDiv, kajne? Kaj to pomeni? No, to je v bistvu samo document.getElementById colorDiv. 

Vendar je to neke vrste okrajšavi način to počne s pomočjo jQuery. Naj samo poglej zdaj v nekaj različnih načinov da sem lahko dejansko uporabite to Document Object Model manipulirati kosov moji strani. Še posebej, gremo da bodo delali na manipulacijo barva posebno Div, colorDiv, na spletni strani. Torej, kaj je, da pogled na to. V redu. Tako da sem na strani. Imenuje test.html ko prenesete to, če želite, da Lemiti s tem. In imam kup gumbi na tej strani. In jaz pravim posebnimi funkcijami za barvo ozadja, vijolična, zelena, oranžna, rdeča, modra, ena funkcija za barvo ozadja, event handler za barvo ozadja in z uporabo jQuery. Kaj sem govoril o ko delam to? Tako smo videli gumbe. Zdaj pa si oglejte nekaj izvorne kode tukaj. Začeli bomo z test.html. Torej posamezne funkcije za ozadje Barva je tisto, kar sem tukaj tipkal. Dovolite mi, da se pomaknete malo. 

In boste opazili, da sem so opredeljena te gumbe reči, kdaj se ta gumb kliknili, klic funkcije obarva vijolično. Ko je ta gumb kliknite, namesto, pokličite funkcija pa zeleno, obrniti oranžno, obarva rdeče, ne obarva modro. Si verjetno lahko uganiti, da je to morda ni najboljši dizajn občutek, kajne? 

Bilo bi lepo, če bi lahko imajo bolj splošen pristop. No, najprej bomo lahko ogledali kaj ti pet funkcij so document.getElementById colorDiv.style.background = vijolična, zelena, oranžna, rdeča, in modra, oz. Torej, ni posebej najboljši dizajn. 

Naslednji sklop gumbov Sem se sem napisal ena funkcija imenuje spreminjajo barvo, ki očitno sprejme niz kot svoj argument. Torej, to je malo bolje. Vijolična, zelena, oranžna, rdeča, modra je zdaj argument. Tako sem napisal bolj splošno sodna funkcija JavaScript, ki bi izgledala nekako takole. Jaz sem, ki poteka v. Ta barva funkcija sprememba je Pričakoval argument imenovano barva. In jaz pravim nastavite barva ozadja na barvo. Torej, tukaj predstavlja kar sem tukaj dobil. Tako da je malo bolje. 

Vendar bi jaz lahko narediti bolje kot to. Če gremo dol, da se zazremo na dogodek trener razmer na, Zdaj vsi ti klici videti enako. Če se spomnite, za naše Razprava o viličarji dogodkov, Jaz lahko dobite informacije o tem, katere ti gumbi je kliknil in uporabite to. 

In tako v event.JavaScript, Sem pisna sprememba barve dogodek, ki številke, kateri gumb je kliknil. To je povod objekt črta. In potem tukaj, da postane res Razvučen. Ampak, kaj počnem, je, da sem nastavitev ozadje barva triggerObject inner.HTML. To je besedilo v med gumbom oznake. 

In potem sem očitno imela da jo nastavite na male črke. In to je, kako sem lahko pretvorite celotno niz v male črke v JavaScript uporabo ta metoda v male. Ker ko sem nastaviti barvo, kot sem poskušal narediti tukaj, barva mora biti vse male. 

Ampak gumb, da sem imel, če vzamemo še enkrat pogledal, opazili, da je besedilo napisana z veliko začetnico P za vijolično. In potem na samem Dno tukaj, sem očitno poskusiti in narediti to s pomočjo jQuery kot dobro. In v tem primeru nisem dejansko kliče funkcijo sploh. Pravkar sem rekel razred, ki sem uporabljajo za ta gumb je gumb jQ. To je to. 

Torej, kako jQuery vem, kaj delam? No, to je ena izmed prednosti poševnica slabosti jQuery. To lahko dovolite mi, da počnejo stvari zelo jedrnato, a morda ne kot intuitivno. Morda tisti, drugi trije narediti malo bolj občutek, kaj delam. Tukaj, čeprav, kaj se dogaja? 

Očitno, ustvarjanje anonimni funkcija da obremenitve, kadarkoli je moj dokument je pripravljen, tako document.ready, nekatere funkcije se bo zgodilo. V bistvu, ko je dokument pripravljen? To je, ko je moja stran naloži. 

Torej, takoj, ko je moja stran naložen je naslednje funkcije je vedno pripravljen. To pravi, če je objekt tipa jQButton, ali če je bila razred jQButton kliknili, izvršiti to funkcijo. Torej, tukaj je dve anonimni funkcije, eden definirano znotraj drugega. 

Torej celotnem mojem kontekstu Tukaj kolikor je moja stran ko to obilje poziva to funkcijo. In ta funkcija čaka za gumb, ki se kliknili. In ko je gumb kliknili, jQ Gumb je posebej kliknili, poziva ta druga Funkcija, ki se dogaja da nastavite ozadje Barva colorDiv biti karkoli besedilo je med oznakami. 

To je pojem kateri gumb je kliknil. Drugače pa, da je to nekako obnaša podobno dogodka. To je samo na enak način sem to bi izraziti v jQuery. Še enkrat, to je verjetno Veliko bolj zastrašujoče. To ni tako jasno, kot nekaj podobnega event.js, ki je morda malo bolj verbose, ampak malo manj zastrašujoče. 

Ampak, če smo pop nazaj v mojo brskalnik okno, če začnem clicking-- dobro, da spremeni v vijolično. To je zelena metodi niza. To je oranžna z obravnavo dogodkov. 

To je rdeča uporabo jQuery, kajne? Vsi obnašajo povsem enako. Samo to storite s pomočjo razlikuje pristopi k reševanju problema. Tam je veliko več jQuery potem smo zagotovo bomo govorili o tem videu. Toda, če želite izvedeti več, lahko pojdite na jQuery vrste dokumentacije in se naučite precej malo več o tem Ta zelo prilagodljiva knjižnica, ki je super za to odjemalsko skriptni kot tisto, kar smo počeli manipulirati videz in občutek naši spletni strani z Document Object Model. Sem Doug Lloyd. To je CS50.