DOUG LLOYD: I denne videoen, ønsket vi å ringe ut separat oppmerksomhet til en meget spesiell element av Javascript som du kan finne nyttig når du starter å arbeide på å manipulere websider og endre innholdet på nettsiden din på sparket. Og det er oppfatningen av Document Object Model. Så som vi så i vår video på Javascript, objekter er svært fleksibel. Og de kan inneholde ulike felt. Og selv om vi ikke gå inn i en masse detalj, disse feltene eller eiendom, at vi ville trolig mer hensiktsmessig kaller dem i forbindelse med en gjenstand, selv disse egenskapene kan være andre gjenstander. Og innsiden av disse objektene kan være andre objekter. 

Du har denne veldig stort objekt med en rekke andre gjenstander innsiden av den, som liksom skaper denne ideen om et stort tre. Nå er den dokumentobjekt en meget spesiell gjenstand i Javascript som organiserer hele nett side under denne slags paraply av et objekt. Og så på innsiden av dokumentet objektet er objekter som presenterer hode og kropp på websiden din. 

Innsiden av disse er andre objekter, et cetera, et cetera, til hele web-side har vært organisert i denne store objekt. Hva er oppsiden her, ikke sant? Vel, vi vet hvordan man skal arbeide med objekter i Javascript. 

Så hvis vi har et objekt som refererer til hele vår nettside, som betyr at ved å ringe den riktige metoder for å manipulere dette objektet eller endre visse av sine eiendommer, vi kan endre elementene vår side programma ved hjelp av Javascript i stedet for å å kode ting med, si, HTML. Så her er et eksempel på en veldig enkel nettside, ikke sant? Det fikk HTML-koder, et hode. 

Innsiden av det er en tittel, hallo verden. Da har jeg en kropp. Innsiden av det, har jeg tre forskjellige ting. Jeg har en h2 header tag, et avsnitt, og en link. Dette er en veldig enkel nettside. 

Vel, hva som kan dokumentet objekt for dette ser ut? Vel, det er en liten skummelt kanskje først. Men det er egentlig bare et stort tre. Og på selve roten av det er dokument. 

Innsiden av dokumentet er en annen objekt henviser til HTML på siden min. Og HTML av siden min er alt dette. Og deretter innsiden av HTML objekt, har jeg et hode objekt, som refererer til alt der. 

Og inni der, Jeg har en tittel objekt. Og inne på det, jeg har en annen innvende at er bare hello world. Jeg kunne ha kroppen min representert som dette. 

Innsiden av kroppen min, jeg har en h2 objekt og en p-objekt for avsnitt og et objekt for en link. Og så dette hele hierarkiet kan representeres som et stort tre med mye mindre lite ting kommer ut av det. Nå, selvfølgelig, når vi programmerer, vi tenker ikke på ting som et stort tre. Vi ønsker å se faktiske kode relaterte ting. 

Og heldigvis, kan vi bruker våre utviklerverktøy å faktisk ta en titt på Document Object dette nettstedet. Og la oss gjøre det. Så jeg har åpnet opp en fane nettleser. 

Og jeg har åpnet opp utviklerverktøy. Og i videoen min på Javascript, jeg nevnes at konsollen er ikke bare et sted der vi skrive ut informasjon, det er også et sted der vi kan legge inn informasjon. I denne sammenheng, hvilken Jeg kommer til å si er Jeg ønsker å komme tilbake dokument objekter, så jeg kan begynne å ta en titt på det. Så hvordan kan jeg gjøre dette? Vel, hvis jeg ønsker å organisere det virkelig pent, Jeg kommer til å si console.dir, D-I-R. Nå bruker jeg console.log å bare print ut noe veldig enkelt. Men hvis jeg ønsker å organisere dette hierarkisk som et objekt, Jeg vil ha den slags strukturert som en katalogstruktur. 

Så jeg ønsker å console.dir dokument. Jeg kommer til å treffe på Enter. Og rett nedenfor det nå, og jeg skal zoome inn her, Jeg har fått dette svaret dokumentet med en liten pil ved siden av seg. Nå, når jeg åpner denne pilen, det kommer til å bli en masse ting. 

Men vi kommer til å ignorere mye av det og bare slags fokus på den viktigste delen, så vi kan begynne å navigere dette dokumentet. Det er mye mer til DOM enn bare foreldre noder og barn noder. Det er mye av hjelpe ting. 

Så jeg kommer til å åpne opp dette. Og det er en hel masse av ting som dukker opp. Men alt jeg bryr meg om er akkurat her, barnet noder. La oss åpne den opp. 

Innsiden av det jeg ser noe kjent, HTML. Så innsiden av våre dokumenter ett nivå ned, HTML. Jeg åpner det opp. Hva er det vi forventer? 

Hvis du husker fra vår diagram, hva skal vi finne på innsiden av HTML? Hvilke to noder er under den i treet? La oss finne det ut. Vi åpner opp HTML. Vi går ned til de underordnede noder. 

Pop som kan åpnes. Det er hodet og kroppen. Og vi kan åpne opp hodet. Gå til sine barn noder. Vel, det er tittelen. 

Og vi kunne gå videre og på denne måten for alltid. Vi kunne gjøre dette med kroppen også. Men det er en måte for oss å se på dokumentet organisert som et stort objekt. Og hvis vi ser på er en stor objekt som ser mye som kode, som betyr at vi kan begynne å manipulere denne store objekt ved hjelp kode for å endre hva vår nettsiden ser ut og føles. 

Så det er en ganske kraftig verktøy vi har til rådighet nå. Så som vi nettopp så, den Document Object selv og alle objektene på innsiden av det har egenskaper og metoder, bare som alle andre objekt som vi har jobbet med i Javascript. Men vi kan bruke disse egenskapene og bruke disse metodene for å slags bore ned fra den store dokumentet og få lavere og lavere og lavere, finere og finere korn detalj, før vi komme til en meget bestemt del av vår nettside som vi ønsker å endre. 

Og når vi oppdaterer egenskapene til Document Object eller ring disse metodene, ting kan skje på vår nettside. Og vi trenger ikke å gjøre noe forfriskende å ha disse endringene trer i kraft. 

Og det er en ganske kul evne til å har når vi jobber med kode. Så hva er noen av disse egenskapene som er en del av et dokument objekt? Vel, har du sannsynligvis sett en par av dem veldig raskt som vi zipping gjennom den gigantiske dokumentet objekt vi nettopp så i nettleseren. 

Men et par av disse egenskapene kan være ting som indre HTML. Og du kan selv hente meg bruker dette i Javascript-video helt på slutten når jeg snakket om hendelser. Hva var denne indre HTML? Vel, det er akkurat hva som er i mellom kodene. 

Og så den indre HTML, for eksempel, av tittel tag, hvis vi hadde holdt det gående i som eksempel et øyeblikk siden, ville ha vært hello world. Det var tittelen på vår side. Andre egenskaper inkluderer nodenavnet, som er navnet på en HTML element som tittel. ID, som er ID attributt av et HTML-element. 

Husker at vi kan spesial indikere spesifikke elementer i vår HTML med en ID-attributt, som vanligvis kommer godt med i sammenheng med CSS, Spesifikt. Foreldrenoden, som er en referanse til hva som er rett opp over meg i DOM. Og barnet noder, som er en referanse til hva som er ned under meg. Og vi så mye av det bare se gjennom. Ordnede noder, det er hvordan vi fikk lavere og lavere inn i treet. 

Attributter, det er bare en matrise av attributter av HTML-elementet. Så et eksempel på attributter kanskje være hvis du har en bildekode, Det har vanligvis en kilde attributt, kanskje en høyde og en bredde attributt. Og så det ville bare være en matrise av alle de attributter tilhørende med at HTML-elementet. 

Stil er en annen som representerer CSS styling av et bestemt element. Og senere i denne video, vil vi spesielt innflytelse stil å gjøre et par av endringer i vår nettside. Så de er noen egenskaper. 

Og det er også noen metoder som vi kan bruke til også raskere kanskje isolere elementer av Document Object. Kanskje den mest allsidige av disse blir getElementById. Så jeg kan si noe sånt, fordi husk at det er en metode for dokument Objekt, document.getElementById. 

Og innsiden av disse parentes angir et HTML-element med en bestemt ID tilskriver at jeg har tidligere satt, og jeg vil umiddelbart gå rett til det elementet av den samlede nettsiden. Så jeg trenger ikke å kanskje bore ned gjennom hvert enkelt lag. Jeg kan bare bruke denne metoden for å finne det, liksom som en varmesøkende rakett, høyre? Det går bare og finner nøyaktig hva den ser etter. 

GetElementsByTagName er svært like i ånden. Kanskje dette ville finne alle de fet koder eller alle p tags og gi meg en rekke alt at jeg da kunne jobbe med. appendChild tilfører noe ett nivå ned i treet. 

Så jeg kan legge til en hel ny element ett nivå lavere. Eller jeg kan fjerne et element som er ett nivå lavere samt hvis jeg vil å slette noe fra min nettside. Nå, en rask koding notat og en rask hodepine sparer notat, forhåpentligvis. 

getElementById-- d er små bokstaver. Jeg kan ikke fortelle deg hvor mange ganger jeg har brukte getElementById og kapitalisert d der. Fordi det er veldig vanlig. Hvis vi skriver ordet ID, er det vanligvis kapital I hovedstaden D. Og koden min fungerer bare ikke. Og jeg kan ikke finne ut hvorfor. Dette er en virkelig, virkelig, virkelig vanlig feil som alle gjør, selv eksperter som har vært å gjøre dette for alltid. Så bare vær oppmerksom, getElementById, at d er små bokstaver. Og forhåpentligvis, sparer du flere minutter ved minst av hjertesorg. 

Så hva betyr alt dette fortelle oss? Vi har disse metodene. Vi har disse egenskapene. Nå, hvis vi begynner fra dokument, dokumentet. uansett, kan vi nå få til noe enkelt stykke vår nettside at vi ønsker å bruke Javascript bare ved å kalle disse metodene og utnytte egenskapene at vi finner på forskjellige steder. 

Dette kan få ordrike, dette document.getElementById, kanskje har en lang kodenavn, kanskje du gjør flere samtaler senere. Ting kan bli litt ordrike. Og som programmerere, som du har sikkert sett i mange av disse videoene, vi liker ikke ordrike ting. 

Vi liker å være i stand til å gjøre ting raskt. Så vi ønsker en mer konsis måte å si noe. Så denne typen fører til oppfatningen av noe som kalles jQuery. Nå jQuery er ikke Javascript. Det er ikke en del av Javascript. 

Det er et bibliotek som ble skrevet av noen Javascript programmerere ca 10 år siden. Og målet er å forenkle denne hva som er kalt klientsiden scripting, som er egentlig hva vi var bare snakker om med DOM manipulasjoner. Og så hvis jeg ønsket å endre bakgrunnsfargen på min nettside, kanskje en bestemt Div. 

Her er jeg tydeligvis får ElementById colorDiv. Og jeg ønsker å sette sin bakgrunnsfarge. Hvis jeg bare bruker ren Javascript hjelp av Document Object Model, det er en masse ting, ikke sant? document.getElementById colorDiv.style.backgroundColor = grønn. 

Puh. Det var mye å si. Det er mye å skrive, også. Og så i jQuery, kan vi kanskje si dette litt mer presist. Handelen av er det kanskje litt litt mer kryptisk plutselig, høyre? 

I det minste den lange er litt mer forklarende om hva vi holder på med. Dette dollartegn, parenteser, enkelt sitat, hasj, colorDiv, ikke sant? Hva betyr det? Vel, det er i utgangspunktet bare document.getElementById colorDiv. 

Men det er denne typen stenografi måte å gjøre det ved hjelp av jQuery. La oss bare ta en titt nå ved et par forskjellige måter at jeg kan faktisk bruke denne Document Object Modellen å manipulere stykker av nettstedet mitt. Spesielt skal vi å være i arbeid på å manipulere fargen på en spesiell Div, colorDiv, på en nettside. Så la oss ta en titt på det. Greit. Så jeg er på en side. Det kalles test.html når du laster ned dette hvis du ønsker å tinker med dette. Og jeg har en haug med knappene på denne siden. Og jeg sier enkeltfunksjoner for bakgrunnsfarge, lilla, grønn, oransje, rød, blå, en enkel funksjon for bakgrunnsfarge, hendelsesbehandling for bakgrunnsfarge, og bruker jQuery. Hva jeg snakker om når jeg gjør dette? Så vi har sett på knappene. Nå, la oss ta en titt på noen av kildekoden her. Vi begynner med test.html. Så enkelte funksjoner for bakgrunn Fargen er hva jeg har skrevet her. La meg bla litt. 

Og du vil merke at jeg har definert disse knappene å si når denne knappen klikkes, kaller funksjonen slår lilla. Når denne knappen klikk, heller, kaller funksjonen blir grønne, bli oransje, røde, blir blå. Du kan sikkert gjette at dette er kanskje ikke den beste designen forstand, ikke sant? 

Det ville være fint om jeg kunne har en mer generell tilnærming. Vel, først vil vi ta en titt på hva disse fem funksjonene er document.getElementById colorDiv.style.background = lilla, grønn, oransje, rød, og blå, henholdsvis. Så, ikke spesielt best design. 

Den neste sett med knapper Jeg har det jeg har skrevet en enkelt funksjon kalt endre farge som tilsynelatende aksepterer en streng som sitt argument. Så dette er litt bedre. Lilla, grønn, oransje, rød, blå er nå et argument. Så jeg har skrevet en mer generell case Javascript-funksjonen, som kan se omtrent slik ut. Jeg har bestått i. Denne funksjonen endrer farge er forventer et argument kalt farge. Og jeg sier innstille bakgrunnsfarge for å farge. Så her representerer det jeg har her. Så det er litt bedre. 

Men jeg kan være i stand til å gjøre det bedre enn det. Hvis vi går ned for å ta en titt på arrangementet handler situasjon, Nå er alle disse samtalene ser det samme. Hvis du husker for vår diskusjon om hendelsesbehandlinger, Jeg kan få informasjon om hvilke av disse knappene ble klikket og bruke det. 

Og så i event.JavaScript, har jeg skrevet endre farge arrangementet, som finner ut hvilken knapp ble klikket. Det er trigger objektet linje. Og så her, det blir veldig ordrike. Men det jeg gjør er at jeg er sette bakgrunnen farge til triggerObject inner.HTML. Det er teksten i mellom knappen koder. 

Og da jeg tydeligvis har å sette den til små bokstaver. Og det er hvordan jeg kan konvertere en hel strengen til små bokstaver i Javascript hjelp denne metoden til små bokstaver. Fordi når jeg satt en farge, så jeg prøver å gjøre her, fargen må være små bokstaver. 

Men på knappen som jeg hadde, hvis vi tar en titt, Legg merke til at teksten er det skrevet med stor P for lilla. Og så i det bunn her, jeg tilsynelatende prøve og gjøre dette ved hjelp av jQuery også. Og i dette tilfellet, er jeg faktisk ikke kalle en funksjon i det hele tatt. Jeg har nettopp sagt klassen at jeg er hjelp for denne knappen er en jQ knapp. Det er alt. 

Så hvordan jQuery vet hva jeg gjør? Vel, dette er en av fordelene slash ulemper med jQuery. Det kan tillate meg å gjøre ting veldig konsist, men kanskje ikke som intuitivt. Kanskje de tre andre gjør en litt mer fornemme hva jeg gjør. Her, men hva er det som skjer? 

Angivelig, skaper en anonym funksjon som laster når dokumentet mitt er klar, så document.ready, noen funksjon kommer til å skje. I utgangspunktet, når er et dokument klar? Det er når min side er lastet. 

Så så snart siden min har lagt inn, Følgende funksjon er alltid klar. Det sier, hvis et objekt av typen jQButton, eller hvis klassen jQButton har blitt klikket, utføre denne funksjonen. Så her er to anonyme funksjoner, en definert på innsiden av den andre. 

Så hele mitt kontekst her så langt er min side når den laster det kaller denne funksjonen. Og denne funksjonen venter for en knapp for å bli klikket på. Og når en knapp klikkes, jQ knappen spesifikt klikkes, det kaller denne andre funksjon, som går å sette bakgrunns Fargen colorDiv å være teksten som står i mellom kodene. 

Dette er forestillingen om hvilken knapp ble klikket. Men ellers er denne typen oppfører ligner på en hendelse. Det er akkurat samme måte som jeg ville uttrykke dette i jQuery. Igjen, er det sannsynligvis en mye mer skremmende. Det er ikke så klart som noe som event.js, som er kanskje litt mer ordrik, men litt mindre skremmende. 

Men hvis vi komme tilbake over til nettleseren min vindu, hvis jeg begynner clicking-- godt, som endret til lilla. Dette er grønn med streng metode. Dette er oransje med hendelsesbehandling. 

Dette er rød bruker jQuery, ikke sant? De oppfører seg akkurat det samme. De bare gjør det ved hjelp av ulike tilnærminger for å løse problemet. Det er mye mer å jQuery da er vi sikkert skal snakke om i denne videoen. Men hvis du ønsker å vite mer, kan du gå til jQuery slags dokumentasjon og lære mye mer om dette svært fleksibel biblioteket, som er stor for å gjøre klientsiden scripting for eksempel hva vi gjorde å manipulere utseendet og følelsen av vår nettside med Document Object Model. Jeg er Doug Lloyd. Dette er CS50.