DOUG LLOYD: I den här videon, vi ville ropa separat uppmärksamhet
till en mycket speciell del av JavaScript
att du kanske tycker är smidiga när du börjar
att arbeta på att manipulera webbsidor och ändra innehållet på din webbsida
i farten.
Och det är begreppet Document Object Model.
Så som vi såg i vår video på JavaScript objekt är mycket flexibla.
>> Och de kan innehålla olika områden.
Och även om vi inte gå in i en hel del detalj, de områden eller fastigheter,
att vi skulle förmodligen mer lämpligt kallar dem
inom ramen för ett objekt, även dessa egenskaper kan finnas andra föremål.
Och insidan av dessa objekt kan vara andra föremål.
>> Du har redan mycket stort objekt med en mängd andra föremål
insidan av det, vilket slags skapar idén om ett stort träd.
Nu är dokumentobjektet en mycket speciella objekt i JavaScript
som organiserar hela din webb sida under denna typ av paraply
av ett objekt.
Och så insidan av dokumentet objekt är objekt som presenterar
huvudet och kroppen på din webbsida.
>> Insidan av dessa är andra objekt, et cetera, et cetera,
tills hela din webbsida har organiserats i detta stora objekt.
Vad är det upp här, eller hur?
Tja, vi vet hur man arbetar med objekt i JavaScript.
>> Så om vi har ett objekt som hänvisar till hela vår webbsida, som
innebär genom att ringa rätt metoder för att manipulera objektet
eller ändra vissa av dess egenskaper, vi
kan ändra elementen i vår sida programmatiskt
med hjälp av JavaScript i stället för att ha att koda saker med, säg, HTML.
Så här är ett exempel på en mycket enkel webbsida, eller hur?
Det har fått HTML-taggar, ett huvud.
>> Inuti finns det en titel, hallå världen.
Sen har jag en kropp.
Insidan av detta har jag tre olika saker.
Jag har en h2 sidhuvudtagg, ett stycke, och en länk.
Detta är en mycket enkel webbsida.
>> Tja, vad kan dokumentet invända detta ut?
Tja, det är lite skrämmande kanske först.
Men det är egentligen bara ett stort träd.
Och vid själva roten av det är handling.
>> Inne i dokumentet är en annan objekt hänvisar till HTML min sida.
Och HTML min sida är allt detta.
Och sedan inne i HTML objekt, jag har ett huvud objekt,
som hänvisar till allting där.
>> Och inne i det, Jag har en titel objekt.
Och inne i det, jag har en annan invända att det är just hallå världen.
Jag kunde ha min kropp representerade så här.
>> Insidan av min kropp, jag har en h2 objekt och ett p objekt för punkt
och en en föremål för en länk.
Och så hela denna hierarki kan representeras som ett stort träd
med massor av mindre lite saker som kommer ut ur det.
Nu, naturligtvis, när vi programmering, vi
inte tänka på saker som ett stort träd.
Vi vill se aktuell kod relaterade saker.
>> Och lyckligtvis, vi kan använda våra utvecklingsverktyg
att faktiskt ta en titt på denna webbplats dokumentobjekt.
Och låt oss göra det.
Så jag har öppnat upp en flik webbläsare.
>> Och jag har öppnat upp Utvecklingsverktyg.
Och i min video på JavaScript, jag nämnde att konsolen inte
endast någonstans där vi skriva ut information,
det är också en plats där vi kan mata in information.
I detta sammanhang, vad Jag kommer att säga är
Jag skulle vilja komma tillbaka dokumentobjekt,
så jag kan börja titta på det.
Så hur kan jag göra detta?
Tja, om jag vill organisera det verkligen snyggt,
Jag kommer att säga console.dir, D-I-R. Nu använder jag console.log bara print
ut något mycket enkelt.
Men om jag vill organisera detta hierarkiskt som ett objekt,
Jag vill ha det slags strukturerad som en katalogstruktur.
>> Så jag vill console.dir dokument.
Jag kommer att slå Enter.
Och just under den nu, och jag ska zooma in här,
Jag har fått detta svar dokument med en liten pil bredvid det.
Nu, när jag öppnar den här pilen, det kommer att bli en hel del saker.
>> Men vi kommer att ignorera en hel del av det och bara typ av fokus
på den viktigaste delen, så vi kan börja navigera detta dokument.
Det finns mycket mer att DOM än bara förälder noder och underordnade noder.
Det finns en hel del sido grejer.
>> Så jag kommer att öppna upp detta.
Och det finns en hel del saker som dyker upp.
Men allt jag bryr mig om är just här, underordnade noder.
Vi öppnar upp det.
>> Inuti det ser jag något välbekant, HTML.
Så insidan av vårt dokument en nivå ner, HTML.
Jag öppnar den upp.
Vad förväntar vi oss?
>> Om ni minns från vårt diagram, vad ska vi hitta inne i HTML?
Vilka två noder under den i trädet?
Låt oss ta reda på.
Vi öppnar upp HTML.
Vi går ner till sina underordnade noder.
>> Pop som kan öppnas.
Det finns huvud och kropp.
Och vi kan öppna upp huvudet.
Gå till sina underordnade noder.
Tja, det är titeln.
>> Och vi kunde gå på och så här för evigt.
Vi kan göra detta med kroppen också.
Men det är ett sätt för oss att titta på dokumentet organiserad som en stor objekt.
Och om vi tittar på är en stor objekt som ser en hel del
som kod, innebär det att vi kan börja att manipulera denna stora objekt med
kod för att ändra vad vår webbplats ser ut och känns.
>> Så det är en ganska kraftfullt verktyg vi har till vårt förfogande nu.
Så när vi såg bara den dokumentobjektet själv
och alla de objekt inuti det har egenskaper och metoder, bara
precis som alla andra objekt som vi har arbetat med i JavaScript.
Men vi kan använda dessa egenskaper och använda dessa metoder för att sorts borra ner
från stora dokument och få lägre och lägre och lägre,
finare och finare korn detalj, tills vi
komma till en mycket specifik del av vår webbsida som vi vill förändra.
>> Och när vi uppdaterar egenskaper hos Document Object eller ring dessa metoder,
saker kan hända på vår hemsida.
Och vi behöver inte göra något uppfriskande att dessa ändringar träder i kraft.
>> Och det är en ganska cool förmåga att har när vi arbetar med koden.
Så vad är några av dessa egenskaper som är en del av ett dokumentobjekt?
Tja, såg du förmodligen en par av dem verkligen snabbt
som vi zippa genom den gigantiska dokument
objekt vi bara såg i webbläsaren.
>> Men ett par av dessa egenskaper kan vara saker som inre HTML.
Och du kanske ens minns mig att använda detta i JavaScript video
i slutet när jag talade om händelser.
Vad var det inre HTML?
Tja, det är bara vad som är i mellan taggarna.
>> Och så inner HTML, exempelvis av den i rubriken
tagg, om vi hade hållit gå i det exemplet för en stund sedan,
skulle ha varit hello world.
Det var titeln på vår sida.
Andra egenskaper inkluderar nodnamn, som
är namnet på en HTML element såsom titel.
ID, som är ID attribut av ett HTML-element.
>> Minns att vi speciellt kan indikera specifika delar av vår HTML
med ett ID-attribut, som vanligtvis kommer väl till pass i samband med CSS,
speciellt.
Ordnad nod, som är en referens till vad är bara upp över mig i DOM.
Och underordnade noder, som är en hänvisning till vad som finns nedanför mig.
Och vi såg en hel del att bara titta igenom.
Ordnade noder, det är hur vi fick lägre och lägre in i trädet.
>> Attribut, det är bara en array av attribut av HTML-element.
Så ett exempel på attribut kanske vara om du har en bild-tagg,
det oftast har en källa attribut kanske en höjd och en bredd attribut.
Och så det skulle bara vara en array av alla de egenskaper som förknippas
med den HTML-element.
>> Style är en annan som inte representerar CSS
styling av ett visst element.
Och senare i denna video, vi ska särskilt
hävstång stil för att göra ett par förändringar till vår hemsida.
Så de är några egenskaper.
>> Och det finns också en del Metoder som vi kan
använder också snabbare kanske isolera delar av Document Object.
Kanske den mest mångsidiga av dessa är getElementById.
Så jag kan säga något i stil med eftersom kom ihåg det är en metod av dokumentet
Objekt, document.getElementById.
>> Och inne i dessa parenteser anger ett HTML-element med en särskild ID
attribut som jag har tidigare set, och jag ska genast
gå rätt till det elementet av den totala webbplats.
Så jag behöver inte kanske borra ner genom varje enskilt lager.
Jag kan bara använda den här metoden för att hitta det, ungefär som en värmesökande missil,
höger?
Det går och finner bara exakt vad det är du letar efter.
>> GetElementsByTagName är mycket i samma anda.
Kanske detta skulle hitta alla fetstil taggar eller alla av p-taggar
och ge mig en rad allt att jag då kunde arbeta med.
appendChild tillför något en nivå i trädet.
>> Så jag kan lägga till en helt ny elementet en lägre nivå.
Eller jag kan ta bort ett element som är en lägre nivå samt om jag vill
att ta bort något från min webbsida.
Nu, en snabb kodning anteckning och en snabb huvudvärk spara notera, förhoppningsvis.
>> getElementById-- d är gemener.
Jag kan inte säga hur många gånger jag har Begagnade getElementById och aktiverade
d där.
Eftersom det är verkligen vanligt.
Om vi ​​skriver ordet ID, är det vanligtvis kapital kapital D.
Och min kod bara fungerar inte.
Och jag kan inte räkna ut varför.
Detta är en riktigt, riktigt, riktigt gemensamma bugg som alla gör,
även experter som har gjort detta för evigt.
Så bara vara medvetna om, getElementById, att d är gemener.
Och förhoppningsvis sparar du flera minuter åtminstone av hjärtesorg.
>> Så vad betyder allt detta berätta?
Vi har dessa metoder.
Vi har dessa egenskaper.
Nu, om vi utgår från dokument, dokument.
vad som helst, vi kan nu komma till någon enda stycke vår hemsida
att vi vill att använda JavaScript bara genom att kalla dessa metoder
och utnyttja egenskaperna att vi hittar på olika platser.
>> Detta kan få ordrika detta document.getElementById,
kanske har en lång taggnamn, kanske du gör flera samtal senare.
Saker kan få lite ordrik.
Och som programmerare, som du har förmodligen sett i många av dessa filmer,
Vi gillar inte ordrik saker.
>> Vi vill att snabbt kunna göra saker.
Så vi vill ha en mer koncist sätt att säga något.
Så denna typ av leder till begreppet något som kallas jQuery.
Nu jQuery är inte JavaScript.
Det är inte en del av JavaScript.
>> Det är ett bibliotek som skrevs av vissa JavaScript programmerare
omkring 10 år sedan.
Och dess mål är att förenkla denna vad kallas klientsidan scripting, som
är i princip vad vi var bara talar om med DOM manipulationer.
Och så om jag ville ändra bakgrundsfärg på min webbsida, kanske
en specifik Div.
>> Här, jag tydligen få ElementById colorDiv.
Och jag vill ställa sin bakgrundsfärg.
Om jag bara använda ren JavaScript med Document Object Model,
det är en massa saker, eller hur? document.getElementById
colorDiv.style.backgroundColor = grön.
>> Whew.
Det var en hel del att säga.
Det är en hel del att skriva, också.
Och så i jQuery, kan vi kanske säga detta lite mer koncist.
Kompromissen att det kanske är lite lite mer kryptiska helt plötsligt,
höger?
>> Åtminstone den långa är lite mer förklarande vad vi gör.
Denna dollartecken, parenteser, enda anbud, hash, colorDiv, eller hur?
Vad betyder det?
Tja, det är i princip bara document.getElementById colorDiv.
>> Men det är denna typ av stenografi sätt att göra det med hjälp av jQuery.
Låt oss bara ta en titt nu på ett par olika sätt
att jag kanske faktiskt Använd denna Document Object
Modell för att manipulera delar av min webbplats.
Framför allt kommer vi att de arbetar för att manipulera
färgen av en viss Div, colorDiv, på en webbsida.
Så låt oss ta en titt på det.
Okej.
Så jag är på en sida.
Det kallas test.html när du laddar ner detta om du vill att mixtra med detta.
Och jag har ett gäng knapparna på den här sidan.
Och jag säger enskilda funktioner för bakgrundsfärg, lila, grönt,
orange, röd, blå, en enda funktion för bakgrundsfärg, händelsehanterare
för bakgrundsfärg, och använder jQuery.
Vad jag talar om när jag gör det här?
Så vi har sett på knapparna.
Nu ska vi ta en titt på några av källkoden här.
Vi börjar med test.html.
Så individuella funktioner för bakgrunds färg är vad jag har skrivit här.
Låt mig rulla lite.
>> Och du kommer att märka att jag har definierat dessa knappar
att säga när denna knapp klickas, anropa funktionen vända lila.
När denna knapp är att klicka, snarare anropa funktionen blir grön,
sväng apelsin, blir röda, blå.
Du kan nog gissa att detta är kanske inte den bästa designen
mening, eller hur?
>> Det skulle vara trevligt om jag kunde har en mer allmän strategi.
Tja, först ska vi ta en titt på vad dessa fem funktioner är
document.getElementById colorDiv.style.background = lila,
grönt, orange, rött, och blått, respektive.
Så, inte särskilt den bästa designen.
>> Nästa uppsättning knappar Jag har är att jag har skrivit
en enda funktion som kallas ändra färg som tydligen
accepterar en sträng som dess argument.
Så det här är lite bättre.
Lila, grön, orange, röd, blått är nu ett argument.
Så jag har skrivit en mer allmän fallet JavaScript-funktion,
som kan se ut så här.
Jag passerar.
Denna funktion ändrar färg är förväntar sig ett argument som kallas färg.
Och jag säger ange bakgrundsfärgen till färgen.
Så här representerar vad jag har här.
Så det är lite bättre.
>> Men jag skulle kunna göra bättre än så.
Om vi ​​går ner för att ta en titt vid händelsehanteraren situationen,
nu alla dessa samtal ser likadana ut.
Om ni minns för vår diskussion om händelsehanterare,
Jag kan få information om vilka av dessa knappar klickade och använda den.
>> Och så i event.JavaScript, jag har skriftligt ändrar färg händelse, som
listar ut vilken knapp du klickade.
Det är avtryckaren objektlinjen.
Och sedan här, det blir verkligen ordrik.
Men vad jag gör är att jag är sätta bakgrunds
färg till triggerObject inner.HTML.
Det är texten i mellan knapp taggar.
>> Och så har jag tydligen att ställa in den till gemener.
Och det är hur jag kan konvertera en hel sträng till gemener i JavaScript genom att använda
denna metod till gemener.
För när jag ställa in en färg, som jag försöker göra här,
färgen måste skrivas med gemener.
>> Men den knapp som jag hade, Om vi ​​tar en titt,
märker att texten finns skriven med ett kapital P för lila.
Och sedan i mycket botten här, jag tydligen
försöka göra detta med hjälp av jQuery också.
Och i detta fall, jag är faktiskt inte anropa en funktion alls.
Jag har just sagt den klass som jag med användning av den här knappen är en jQ knapp.
Det är allt.
>> Så hur jQuery vet vad jag gör?
Nåväl, detta är en av fördelarna slash nackdelar med jQuery.
Det kan tillåta mig att göra saker mycket kortfattat, men kanske inte
som intuitivt.
Kanske de andra tre gör en lite mer känna vad jag gör.
Här, dock är vad som händer?
>> Tydligen, skapar en anonym funktion
som laddas när mitt dokument är klar, så document.ready,
någon funktion som kommer att hända.
I grund och botten, när är ett dokument redo?
Det är när min sida har laddats.
>> Så snart som min sida har laddats, den Följande funktion är alltid redo.
Det säger, om ett objekt av typen jQButton, eller om klass jQButton har klickat,
utför denna funktion.
Så här är två anonyma funktioner, en definierad inuti den andra.
>> Så hela mitt sammanhang här hittills är min sida
när den laddar man kallar denna funktion.
Och denna funktion väntar för en knapp som skall klickas.
Och när en knapp klickas, jQ knappen specifikt klickas,
Det kallar detta andra funktion, som kommer
för att ställa in bakgrunden färgen på colorDiv vara
vilken text är mellan taggarna.
>> Detta är begreppet vilken knapp du klickade.
Men annars är den här sortens beter liknar en händelse.
Det är precis samma sätt som jag skulle uttrycka detta i jQuery.
Återigen, det är förmodligen en mycket mer hotfull.
Det är inte så tydlig som något liknande event.js,
som är kanske lite mer mångordig, men lite mindre
hotfull.
>> Men om vi pop tillbaka över till min webbläsare fönstret, om jag börjar clicking-- bra,
som ändrats till lila.
Detta är grön med strängen metoden.
Detta är orange med hjälp av händelsehanterare.
>> Detta är röd med hjälp av jQuery, eller hur?
De alla beter sig exakt likadant.
De gör det bara med hjälp av olika tillvägagångssätt för att lösa problemet.
Det finns mycket mer att jQuery vi då är säkert
kommer att tala om i den här videon.
Men om du vill lära dig mer, kan du gå till jQuery slags dokumentation
och lära sig en hel del mer om denna mycket böjlig bibliotek, som
är bra för att göra klientsidan skript som vad vi gjorde
att manipulera utseendet och känslan av vår hemsida
med Document Object Model.
Jag är Doug Lloyd.
Detta är CS50.