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.