DOUG LLOYD: I denne video, vi ønskede at kalde separat opmærksomhed til en meget særlig element i JavaScript at du kan finde praktisk når du starter til at arbejde på at manipulere websider og ændre indholdet på din webside om flyve. Og det er begrebet Document Object Model. Så som vi så i vores video på JavaScript, objekter er meget fleksible. Og de kan indeholde forskellige områder. Og selvom vi ikke gå ind i en masse detalje, disse områder eller egenskaber, at vi ville sandsynligvis mere passende kalde dem i forbindelse med et objekt, selv disse egenskaber kan være andre objekter. Og inde i disse objekter kan være andre objekter. 

Du har denne meget store objekt med en masse andre objekter inde i den, hvilken slags skaber denne idé om et stort træ. Nu dokumentet objektet er en meget speciel objekt i JavaScript der organiserer hele din web side under denne slags paraply af et objekt. Og så indersiden af ​​dokumentet objekt er objekter præsenterer hoved og krop på din webside. 

Inde i dem er andre genstande, et cetera, et cetera, indtil hele din webside har været organiseret i denne store objekt. Hvad er opadrettede her, ikke? Tja, vi ved, hvordan man arbejder med objekter i JavaScript. 

Så hvis vi har et objekt, refererer til hele vores hjemmeside, at betyder ved at kalde den korrekte metoder til at manipulere det pågældende objekt eller ændring af visse af dens egenskaber, vi kan ændre elementerne i vores side programmeringsmæssigt ved hjælp af JavaScript i stedet for at at kode ting med, siger, HTML. Så her er et eksempel på en meget simpel webside, right? Det har fået HTML-tags, et hoved. 

Inde i der er en titel, hej verden. Så jeg har en krop. Inde i det, jeg har tre forskellige ting. Jeg har en h2 header tag, et afsnit, og et link. Dette er en meget enkel webside. 

Nå, hvad kunne dokumentet objekt for denne se ud? Tja, det er lidt skræmmende måske i første omgang. Men det er egentlig bare et stort træ. Og på selve roden af ​​det er dokument. 

Inde i dokumentet er en anden objekt refererer til HTML på min side. Og HTML på min side er alt dette. Og derefter inde i HTML objekt, jeg har et hoved objekt, som henviser til alt der. 

Og inde i der, Jeg har en titel objekt. Og inde i der, jeg har en anden objekt det er bare hej verden. Jeg kunne have min krop repræsenteret som denne. 

Inde i min krop, jeg har en h2 objekt, og en p objekt for punkt og en a genstand for et link. Og så dette hele hierarki kan repræsenteres som et stort træ med masser af mindre lidt ting kommer ud af det. Nu, selvfølgelig, når vi programmering, vi ikke tænke på ting som et stort træ. Vi ønsker at se faktiske kode relaterede ting. 

Og heldigvis kan vi bruge vores udviklingsværktøjer til rent faktisk at tage et kig på denne hjemmeside dokument objekt. Og lad os gøre det. Så jeg har åbnet en fane browser. 

Og jeg har åbnet Developer Tools. Og i min video på JavaScript, jeg nævnes, at konsollen ikke er kun et sted, hvor Vi udskrive oplysninger, det er også et sted, hvor vi kan indtaste oplysninger. I denne forbindelse, hvilket Jeg har tænkt mig at sige, er Jeg vil gerne komme tilbage dokumentet objekter, så jeg kan begynde at få et kig på det. Så hvordan kan jeg gøre dette? Tja, hvis jeg ønsker at organisere det virkelig pænt, Jeg har tænkt mig at sige console.dir, D-I-R. Nu bruger jeg console.log til bare udskrive ud af noget meget enkelt. Men hvis jeg ønsker at organisere denne hierarkisk som et objekt, Jeg vil have det slags struktureret som en mappestruktur. 

Så jeg vil gerne console.dir dokument. Jeg har tænkt mig at trykke Enter. Og lige under det nu, og jeg vil zoome ind her, Jeg har fået dette svar dokument med en lille pil ved siden af ​​den. Nu, når jeg åbner denne pil, Der kommer til at være en masse ting. 

Men vi kommer til at se bort fra en masse af det og bare lidt fokus på den vigtigste del, så vi kan begynde at navigere dette dokument. Der er meget mere til DOM end bare forælder noder og underordnede noder. Der er en masse underordnet ting. 

Så jeg har tænkt mig at åbne denne op. Og der er en hel masse af ting, der popper op. Men alt jeg holder af, er lige her, barn noder. Lad os åbne det op. 

Inde i der jeg ser noget velkendt, HTML. Så inde i vores dokument et niveau ned, HTML. Jeg åbner det op. Hvad forventer vi? 

Hvis du husker fra vores diagram, hvad skal vi finde inde i HTML? Hvad to knuder er under det i træet? Lad os finde ud af. Vi åbner op HTML. Vi går ned til sine underordnede noder. 

Pop, der kan åbnes. Der er hoved og krop. Og vi kan åbne op for hovedet. Gå til dets undernoder. Tja, der er titlen. 

Og vi kunne blive ved og på denne måde for evigt. Vi kunne gøre dette med kroppen også. Men der er en måde for os at se på dokumentet organiseret som en stor genstand. Og hvis vi ser på er en stor objekt, der ser meget lignende kode, der betyder, at vi kan begynde til at håndtere denne store objekt ved hjælp kode til at ændre, hvad vores hjemmeside ser ud og føles. 

Så det er en temmelig stærkt værktøj vi har til vores rådighed nu. Så som vi lige har set, den dokument objektet selv og alle de objekter inde i det har egenskaber og metoder, lige som enhver anden genstand, som vi har arbejdet med i JavaScript. Men vi kan bruge disse egenskaber, og bruge disse metoder til at slags bore ned fra stort dokument og få lavere og lavere og lavere, finere korn af detaljer, indtil vi komme til et meget specifikt stykke af vores webside, som vi ønsker at ændre. 

Og når vi opdaterer egenskaber af Document Object eller ring disse metoder, ting kan ske på vores hjemmeside. Og vi behøver ikke at gøre nogen forfriskende at få disse ændringer træder i kraft. 

Og det er en temmelig cool evne til at have, når vi arbejder med kode. Så hvad er nogle af disse egenskaber der er en del af et dokument objekt? Nå, sandsynligvis så dig en par af dem virkelig hurtigt som vi zipping gennem den gigantiske dokument objekt vi lige har set i webbrowseren. 

Men et par af disse egenskaber kunne være ting som indre HTML. Og du kan endda huske mig ved hjælp af denne i JavaScript video til allersidst, når jeg talte om begivenhederne. Hvad var denne indre HTML? Tja, det er bare, hvad der er i mellem tags. 

Og så den indre HTML, for eksempel af den i overskriften tag, hvis vi havde holdt går i at eksempelvis et øjeblik siden, ville have været Hello world. Det var titlen på vores side. Andre egenskaber omfatter node navn, som er navnet på en HTML element, såsom titlen. ID, som er ID attribut af et HTML-element. 

Husk på, at vi specielt kan indikere specifikke elementer i vores HTML med en id-attribut, som normalt kommer i handy i forbindelse med CSS, specifikt. Forældreknudepunktet, som er en henvisning til hvad der er lige op over mig i DOM. Og child noder, som er en henvisning til, hvad der er ned under mig. Og vi så en masse, der bare at kigge igennem. Barn noder, det er, hvordan vi fik lavere og lavere ned i træet. 

Attributter, det er bare et array af attributter af HTML-element. Så et eksempel på egenskaber måske være, hvis du har et billede tag, det som regel er en kilde attribut, måske en højde og en bredde attribut. Og så ville blot være et array af alle de attributter knyttet med, at HTML-element. 

Style er en anden, der betyder repræsenterer CSS styling af et bestemt element. Og senere i denne video, vil vi specifikt gearing stil at gøre et par af ændringer i vores hjemmeside. Så dem er nogle egenskaber. 

Og der er også nogle metoder, som vi kan bruger også hurtigere måske isolere elementer af Document Object. Måske den mest alsidige af disse er getElementById. Så jeg kan sige noget lignende, fordi husk det er en metode af dokumentet Objekt, document.getElementById. 

Og inde i disse parenteser, angiver et HTML-element med et bestemt ID attribut, at jeg har tidligere sæt, og jeg vil straks gå lige til dette element af den samlede hjemmeside. Så jeg behøver ikke at måske bore ned gennem hvert enkelt lag. Jeg kan bare bruge denne metode til at finde det, lidt ligesom en varme søger missil, højre? Det bare går og finder præcis, hvad det er på udkig efter. 

GetElementsByTagName er meget ens i ånd. Måske ville finde alle de fed tags eller alle de p tags og give mig en vifte af alt at jeg så kunne arbejde med. appendChild tilføjer noget et niveau ned i træet. 

Så jeg kan tilføje en hel ny element et niveau lavere. Eller jeg kan fjerne et element, der er et niveau lavere så godt, hvis jeg vil have at slette noget fra min webside. Nu en hurtig kodning note og en hurtig hovedpine besparelse note, forhåbentlig. 

getElementById-- d er små bogstaver. Jeg kan ikke fortælle dig, hvor mange gange jeg har Brugte getElementById og kapitaliserede d der. Fordi det er virkelig almindeligt. Hvis vi skriver ordet id, er det normalt kapital I hovedstaden D. Og min kode bare ikke fungerer. Og jeg kan ikke finde ud af hvorfor. Dette er en virkelig, virkelig, virkelig fælles fejl, som alle gør, selv eksperter, der har gjort det for evigt. Så bare være klar, getElementById, at d er små bogstaver. Og forhåbentlig, der sparer dig flere minutter ved mindst hjertesorg. 

Så hvad betyder alt dette fortælle os? Vi har disse metoder. Vi har disse egenskaber. Nu, hvis vi starter fra dokument, dokument. uanset hvad, kan vi nu komme til enhver enkelt stykke af vores webside at vi ønsker at bruge JavaScript lige ved at kalde disse metoder og udnytte de egenskaber, at vi finder på forskellige steder. 

Dette kan få ordrige Dette document.getElementById, måske har en lang mærke navn, måske du gøre flere opkald senere. Ting kan få lidt ordrige. Og som programmører, som du har formentlig ses i mange af disse videoer, vi ikke kan lide ordrige ting. 

Vi kan lide at være i stand til at gøre tingene hurtigt. Så vi vil gerne have en mere kortfattet måde at sige noget. Så denne slags fører til begrebet noget, der hedder jQuery. Nu jQuery er ikke JavaScript. Det er ikke en del af JavaScript. 

Det er et bibliotek, der blev skrevet af nogle JavaScript programmører omkring 10 år siden. Og målet er at forenkle det, hvad er kaldet klient side scripting, som er dybest set, hvad vi var bare taler om med DOM manipulationer. Og så hvis jeg ønskede at ændre baggrundsfarve på min webside, måske en bestemt Div. 

Her, jeg tilsyneladende får ElementById colorDiv. Og jeg ønsker at indstille sin baggrundsfarve. Hvis jeg bare har tænkt at bruge ren JavaScript ved hjælp af Document Object Model, der er en masse ting, ikke? document.getElementById colorDiv.style.backgroundColor = grøn. 

Puha. Det var en masse at sige. Det er en masse at skrive, også. Og så i jQuery, kan vi måske sige dette lidt mere præcist. Afvejningen være det er måske lidt lidt mere kryptisk pludselig, højre? 

Mindst en lang er en smule mere forklarende om, hvad vi laver. Denne dollartegn, parenteser, enkelt tilbud, hash, colorDiv, ikke? Hvad betyder det? Tja, det er dybest set bare document.getElementById colorDiv. 

Men det er den slags stenografi måde at gøre det ved hjælp af jQuery. Lad os bare tage et kig nu på et par forskellige måder at jeg kan faktisk bruge dette Document Object Model til at manipulere stykker af min hjemmeside. Især vil vi at arbejde på at manipulere farven på en bestemt Div, colorDiv, på en webside. Så lad os tage et kig på det. Okay. Så jeg er på en side. Det hedder test.html når du henter dette, hvis du ønsker at rode med dette. Og jeg har fået en masse knapperne på denne side. Og jeg siger individuelle funktioner til baggrundsfarve, lilla, grøn, orange, rød, blå, en enkelt funktion til baggrundsfarve, event handler til baggrundsfarve, og ved hjælp jQuery. Hvad jeg taler om når jeg gør det? Så vi har set på knapperne. Lad os nu tage et kig på nogle af kildekoden her. Vi begynder med test.html. Så individuelle funktioner til baggrunden farve er, hvad jeg har skrevet her. Lad mig rulle en lille smule. 

Og du vil opdage, at jeg har defineret disse knapper at sige, når denne knap er klikket, kalde funktionen dreje lilla. Når denne knap er at klikke snarere, kalder funktionen bliver grøn, bliver orange, røde, drej blå. Du kan sikkert gætte på, at dette er måske ikke det bedste design mening, ikke? 

Det ville være rart, hvis jeg kunne har en mere generel tilgang. Nå, først vil vi tage et kig hvad disse fem funktioner er document.getElementById colorDiv.style.background = lilla, grøn, orange, rød, og blå hhv. Så ikke særlig det bedste design. 

Det næste sæt knapper Jeg har er jeg har skrevet en enkelt funktion kaldet ændre farve, der tilsyneladende accepterer en streng som sit argument. Så dette er en lille smule bedre. Lilla, grøn, orange, rød, blå er nu et argument. Så jeg har skrevet en mere generel tilfælde JavaScript-funktion, som kunne se noget som dette. Jeg passerer i. Denne funktion skifter farve er forventer et argument kaldet farve. Og jeg siger indstille baggrundsfarve til farve. Så her repræsenterer, hvad jeg har her. Så det er lidt bedre. 

Men jeg kan måske gøre det bedre end det. Hvis vi går ned for at tage et kig ved arrangementet handleren situationen, nu alle disse opkald ser det samme. Hvis du husker for vores diskussion om hændelseshandlere, Jeg kan få oplysninger om, hvilke af disse knapper blev klikket og bruge det. 

Og så i event.JavaScript, jeg har skriftlig ændre farve begivenhed, som tal ud hvilken knap blev klikket. Det er på aftrækkeren objekt linje. Og så her, det bliver rigtig ordrige. Men hvad jeg gør, er jeg er indstilling af baggrunden farve til triggerObject inner.HTML. Det er teksten i mellem knappens tags. 

Og så er jeg åbenbart har at sætte den til små bogstaver. Og det er sådan jeg kan konvertere en hel streng til små bogstaver i JavaScript ved hjælp denne metode til små bogstaver. Fordi når jeg indstille en farve, som jeg forsøger at gøre her, farven skal være små bogstaver. 

Men den knap, jeg havde, hvis vi tager et andet udseende, bemærke, at teksten er der skrevet med en kapital P for lilla. Og så på den meget bund her, jeg åbenbart forsøge at gøre dette ved hjælp af jQuery så godt. Og i dette tilfælde, er jeg faktisk ikke kalde en funktion på alle. Jeg har lige sagt klassen, at jeg er bruger til denne knap er en jQ knap. Det er det. 

Så hvordan gør jQuery ved, hvad jeg gør? Nå, det er en af ​​fordelene skråstreg ulemper ved jQuery. Det kan tillade mig at gøre ting meget præcist, men måske ikke som intuitivt. Måske de andre tre gøre en lidt mere fornemme, hvad jeg laver. Her, selv om, hvad der foregår? 

Tilsyneladende skaber en anonym funktion at belastninger, når mit dokument er klar, så document.ready, nogle funktion kommer til at ske. Dybest set, når er et dokument klar? Det er da min side er indlæst. 

Så så snart min side er indlæst, det følgende funktion er altid klar. Den siger, hvis et objekt af typen jQButton, eller hvis klassen jQButton er blevet klikket, udføre denne funktion. Så her er to anonyme funktioner, er defineret inde i den anden. 

Så hele min kontekst her hidtil er min side når den indlæser den kalder denne funktion. Og denne funktion venter for en knap for at blive klikket. Og når en knap der klikkes, jQ knap specifikt klikkes, det kalder denne anden funktion, som vil at indstille baggrunden farve colorDiv at være uanset hvad tekst er i mellem tags. 

Dette er begrebet hvilken knap blev klikket. Men ellers, det er en slags opfører ligner en begivenhed. Det er bare på samme måde, jeg ville udtrykke dette i jQuery. Igen, det er sandsynligvis en meget mere skræmmende. Det er ikke så klar som noget som event.js, der er måske en lille smule mere verbose, men en lille smule mindre skræmmende. 

Men hvis vi pop tilbage over til min browser vindue, hvis jeg begynder clicking-- godt, der ændres til lilla. Dette er grøn ved hjælp af strengen metode. Dette er orange ved hjælp af event handler. 

Dette er rød ved hjælp af jQuery, ikke? De alle opfører sig nøjagtig det samme. De gør det bare ved hjælp af forskellige tilgange til at løse problemet. Der er meget mere til jQuery så er vi helt sikkert vil tale om i denne video. Men hvis du ønsker at vide mere, kan du gå til jQuery slags dokumentation og lære en hel del mere om denne meget fleksible bibliotek, som er fantastisk til at gøre klientsiden scripting såsom hvad vi foretog at manipulere udseendet og fornemmelsen af ​​vores hjemmeside med Document Object Model. Jeg er Doug Lloyd. Det er CS50.