DOUG LLOYD: In deze video, we wilden te roepen apart aandacht een zeer specifieke element van JavaScript dat u misschien handig vinden wanneer je begint om te werken aan het manipuleren van webpagina's en de inhoud van uw webpagina te veranderen on the fly. En dat is het begrip het Document Object Model. Dus zoals we zagen in onze video-on- JavaScript, objecten zeer flexibel zijn. En ze kunnen verschillende velden bevatten. En hoewel we niet in een veel te gaan detail, die velden of eigenschappen, dat we zouden waarschijnlijk meer ze adequaat te bellen in het kader van een voorwerp, zelfs die eigenschappen kunnen andere objecten. En de binnenkant van deze objecten kunnen andere objecten. 

Je hebt dit zeer groot object met een heleboel andere objecten erin dat soort schept dit idee van een grote boom. Nu, het document object is een heel bijzonder object in JavaScript die je hele web organiseert pagina onder dit soort paraplu een object. Zo binnenkant van het document voorwerp zijn objecten presenteren het hoofd en het lichaam van uw webpagina. 

Binnenkant van die andere voorwerpen, et cetera, et cetera, totdat je hele webpagina heeft georganiseerd in deze grote object. Wat is de kop hier, toch? Nou, we weten hoe we werken met objecten in JavaScript. 

Dus als we een object dat verwijst naar onze hele webpagina, die betekent dat door te bellen naar de juiste methoden voor dat object te manipuleren of wijziging van bepaalde zijn eigenschappen, we kunnen de elementen van verandering onze pagina programmatisch met behulp van JavaScript in plaats van om dingen met bijvoorbeeld HTML-code. Dus hier is een voorbeeld van een zeer eenvoudige webpagina, toch? Het heeft HTML-tags, een hoofd. 

Binnenkant van er is een titel, hallo wereld. Dan heb ik een lichaam. Binnenkant van dat, ik heb drie verschillende dingen. Ik heb een h2 header-tag, een paragraaf, en een link. Dit is een zeer eenvoudige webpagina. 

Nou, wat zou het document object voor deze eruit? Nou, het is een beetje eng misschien op het eerste. Maar het is eigenlijk gewoon een grote boom. En aan de wortel van het document. 

Binnen in het document is een object verwijzen naar de HTML van mijn pagina. En de HTML van mijn pagina is dit alles. En vervolgens in de HTML voorwerp, ik heb een hoofd object, die verwijst naar alles wat er. 

En binnen daar, Ik heb een titel object. En de binnenkant van daar, ik heb een andere object dat is gewoon hallo wereld. Ik kon mijn lichaam vertegenwoordigd als deze. 

Binnenkant van mijn lichaam, ik heb een h2 object en een p object voor paragraaf en een een object voor een link. En dus is deze hele hiërarchie kan worden voorgesteld als een grote boom met veel kleinere kleine dingen die uit het. Nu, natuurlijk, wanneer we programmeren we niet denken aan zaken als een grote boom. We willen zien werkelijke code gerelateerde dingen. 

En gelukkig, we kunnen Gebruik onze developer tools om daadwerkelijk een kijkje nemen op deze website document object. En laten we dat doen. Dus ik heb een tabblad browser geopend. 

En ik heb Developer Tools opengesteld. En in mijn video over JavaScript, I vermeld dat de console niet alleen ergens waar we printen informatie het is ook een plek waar we kunnen gegevens invoeren. In deze context, wat Ik ga zeggen is Ik zou graag terug te krijgen de documentobjecten, dus ik kan beginnen met een kijkje op het hebben. Dus hoe kan ik dit doen? Nou, als ik wil organiseren echt mooi, Ik ga zeggen console.dir, D-I-R. Nu gebruik ik console.log gewoon printen iets heel eenvoudig. Maar als ik wil dit te organiseren hiërarchisch als een object, Ik wil het soort van gestructureerde zoals een mappenstructuur. 

Dus ik wil document console.dir. Ik ga druk op Enter. En rechts onder het nu, en ik zal hier in te zoomen, Ik heb dit antwoord document gekregen met een kleine pijl naast het. Nu, als ik deze pijl te openen, Er gaat een heleboel dingen zijn. 

Maar we gaan veel te negeren van het en gewoon een soort van aandacht het belangrijkste onderdeel, dus kan beginnen om dit document te navigeren. Er is veel meer aan de DOM dan gewoon ouder knooppunten en onderliggende knooppunten. Er is veel aanvullende spullen. 

Dus ik ga dit openen. En er is een heleboel dingen die opduikt. Maar alles wat ik zorg over is hier, kind knooppunten. Laten we open die omhoog. 

Binnen daar zie ik iets bekends, HTML. Dus binnen onze document een niveau lager, HTML. Ik open dat op. Wat moeten we verwachten? 

Misschien herinner je je van ons diagram, wat moeten we binnen van HTML? Welke twee knooppunten eronder in de boom? Laten we het uitzoeken. We openen HTML. We gaan naar haar kind knooppunten. 

Pop die geopend. Er zijn hoofd en lichaam. En we kunnen het openstellen van de kop. Ga naar haar kind knooppunten. Nou, er is de titel. 

En we konden gaan en op deze manier altijd. We kunnen dit doen met lichaam. Maar er is een manier voor ons om naar te kijken het document georganiseerd als een groot object. En als we kijken naar een grote object dat veel lijkt zoals de code, dat betekent dat we kunnen beginnen om deze grote object te manipuleren met behulp van code om wat te veranderen onze website eruit ziet en voelt. 

Dus dat is een vrij krachtig hulpmiddel we tot onze beschikking hebben nu. Dus als we net zagen, de document object zelf en alle voorwerpen erin hebben eigenschappen en methoden, net net als elk ander object dat we hebben gewerkt met in JavaScript. Maar we kunnen die eigenschappen gebruiken en Gebruik deze methoden om een ​​soort van drill down van de grote document en krijg lager en lager en lager, fijner en fijner granen detail, totdat we naar een specifiek stuk onze webpagina die we willen veranderen. 

En als we de eigenschappen van de update Document Object of bel die methoden, dingen kunnen gebeuren op onze website. En we hebben geen behoefte aan een verfrissende doen om deze veranderingen door te voeren. 

En dat is een vrij koel vermogen hebben wanneer we werken met een code. Dus wat zijn sommige van deze eigenschappen die deel uitmaken van een document object? Nou, je waarschijnlijk zag een paar van hen heel snel als we waren zippen door middel van de reus document object dat we net zagen in de webbrowser. 

Maar een aantal van deze eigenschappen misschien dingen als innerlijke HTML. En je zou zelfs kunnen herinneren me het gebruik van deze in de JavaScript-video aan het einde, toen ik sprak over de gebeurtenissen. Wat was deze innerlijke HTML? Nou, het is gewoon wat tussen de labels. 

En zo de binnenste HTML, bijvoorbeeld de titel tag, als we hadden gehouden gaan in dat bijvoorbeeld een moment geleden, wereld zou zijn geweest hallo. Dat was de titel van onze pagina. Overige eigenschappen onder het knooppunt naam, die is de naam van een HTML element zoals titel. ID, de ID attribuut van een HTML-element. 

Bedenk dat we speciaal kan aangeven specifieke elementen van onze HTML een ID-kenmerk, die meestal komt goed van pas in het kader van CSS, specifiek. Bovenliggende knooppunt, dat een verwijzing naar wat is er net boven mij in de DOM. En onderliggende knooppunten, die een verwijzing naar wat er beneden mij. En we zagen een heleboel van die gewoon op zoek door. Kind knooppunten, dat is hoe we kregen lager en lager in de boom. 

Attributen, dat is gewoon een array van attributen van het HTML-element. Dus een voorbeeld attributen macht zijn als u een beeld tag, het heeft gewoonlijk een bron kenmerk, misschien een hoogte en een breedte attribuut. En dus dat zou slechts een array zijn van alle bijbehorende attributen met die HTML-element. 

Stijl is een ander dat vertegenwoordigt de CSS- styling van een bepaald element. En verderop in deze video, zullen we specifiek leverage stijl om een ​​paar te maken van wijzigingen op onze website. Dus dat zijn een aantal eigenschappen. 

En er zijn ook een aantal methoden die we kunnen Gebruik ook sneller misschien isoleren elementen van de Document Object. Misschien, de meest veelzijdige Deze zijn getElementById. Dus ik zou zoiets zeggen, want vergeet niet het is een methode van het Document Object, document.getElementById. 

En de binnenkant van de haakjes, specificeren een HTML-element met een bepaalde ID attribuut dat ik eerder heb set, en ik zal onmiddellijk ga recht op dat element van de totale website. Dus ik hoef niet te misschien boren beneden door elke laag. Ik kan gewoon gebruik maken van deze methode om het te vinden, soort als een hittezoekende raket, rechts? Het gaat gewoon en vindt precies wat hij zoekt. 

GetElementsByTagName is zeer vergelijkbaar in de geest. Misschien is dit zou al het vinden bold markeringen of alle p labels en geef me een reeks van alles dat ik dan kon werken. appendChild voegt iets een niveau lager in de boom. 

Dus ik kan een hele nieuwe toe te voegen element één niveau lager. Of ik kan een element dat is te verwijderen Een niveau lager en als ik wil iets van mijn website verwijderen. Nu, een snelle codering noot en een snelle hoofdpijn besparen nota, hopelijk. 

getElementById-- de d kleine letters. Ik kan je niet vertellen hoeveel keer ik heb gebruikte getElementById en gekapitaliseerde de d daar. Want het is echt gemeen. Als we schrijven het woord ID, het is meestal kapitaal I kapitaal D. En mijn code werkt gewoon niet. En ik kan niet achterhalen waarom. Dit is echt, echt, echt voorkomende fout dat iedereen maakt, zelfs deskundigen die moeten is dit altijd doen. Dus gewoon bewust, getElementById, dat d kleine letters. En hopelijk, dat bespaart u een aantal minuten op zijn minst van hartzeer. 

Dus wat heeft dit alles ons vertellen? We hebben deze methoden. We hebben deze eigenschappen. Nu, als we uitgaan van document, document. wat dan ook, we kunnen nu aan een enkel stuk van onze website dat willen we met behulp van JavaScript gewoon door te bellen deze methoden en gebruik te maken van de eigenschappen dat er op diverse locaties. 

Dit kan krijgen langdradig, dit document.getElementById, misschien een lange tag naam, misschien meer gesprekken wil je later. Dingen kunnen een beetje langdradig. En zoals programmeurs, als je hebt waarschijnlijk gezien in veel van deze video's, we niet langdradig dingen. 

We willen in staat zijn om dingen te snel te doen. Dus we zouden een meer willen beknopte manier om iets te zeggen. Dus dit soort leidt tot de notie van iets genaamd jQuery. Nu jQuery is niet JavaScript. Het is geen onderdeel van JavaScript. 

Het is een bibliotheek die werd geschreven door sommige JavaScript-programmeurs ongeveer 10 jaar geleden. En zijn doel is om dit wat te vereenvoudigen riep client-side scripting, die is eigenlijk wat we waren net over met DOM manipulaties. En dus als ik wilde het te wijzigen achtergrondkleur van mijn webpagina, misschien specifieke Div. 

Hier, ik ben blijkbaar krijgen ElementById colorDiv. En ik wil de achtergrondkleur. Als ik alleen met behulp van pure JavaScript met behulp van de Document Object Model, dat is een heleboel dingen, toch? document.getElementById colorDiv.style.backgroundColor = groen. 

Oef. Dat was een veel te zeggen. Het is een stuk te typen, ook. En zo in jQuery, kunnen we misschien zeggen: dit een beetje meer bondig. De afweging die het is misschien een beetje beetje cryptisch ineens, rechts? 

Tenminste het lang duurt een beetje verklarend als aan wat we doen. Dit dollarteken, haakjes, enkel citaat, hash, colorDiv, toch? Wat betekent dat? Nou, dat is eigenlijk gewoon document.getElementById colorDiv. 

Maar het is dit soort steno manier van doen met behulp van jQuery. Laten we nu een kijkje nemen een paar verschillende manieren opdat ik eigenlijk Gebruik deze Document Object Model om stukken van mijn site te manipuleren. In het bijzonder, we gaan te werken op de manipulatie de kleur van een bepaalde Div, colorDiv, op een webpagina. Dus laten we eens kijken naar dat. Prima. Dus ik ben op een pagina. Het heet test.html wanneer u downloaden dit als u wilt sleutelen aan dit. En ik heb een heleboel gekregen knoppen op deze pagina. En ik afzonderlijke functies te zeggen voor de achtergrond kleur, paars, groen, oranje, rood, blauw, een enkele functie voor de achtergrond kleur, event handler voor de achtergrond kleur, en met behulp van jQuery. Wat ben ik het over als ik dit doe? Dus hebben we de knoppen gezien. Laten we nu eens een kijkje nemen op sommige van de broncode in. We beginnen met test.html. Zodat afzonderlijke functies voor de achtergrond kleur is wat ik hier heb getypt. Laat me schuiven een beetje. 

En je zult merken dat ik hebben deze knoppen gedefinieerd te zeggen wanneer deze knop wordt geklikt, bellen met de functie paars. Wanneer deze knop wordt geklikt, plaats, bellen met de functie groen, draaien oranje, rood, blauw. U kunt wel raden dat dit is misschien niet het beste ontwerp gevoel, toch? 

Het zou mooi zijn als ik kon hebben een meer algemene aanpak. Nou, ten eerste gaan we een kijkje nemen wat die vijf functies document.getElementById colorDiv.style.background = paars, groen, oranje, rood, en blauw, respectievelijk. Dus, niet bijzonder het beste ontwerp. 

De volgende reeks knoppen Ik heb is dat ik heb geschreven een functie genaamd kleur die blijkbaar accepteert een string als argument. Dus dit is een beetje beter. Paars, groen, oranje, rood, blue is nu een argument. Dus ik heb geschreven een meer algemeen Indien JavaScript-functie, die zoiets zou kunnen zien. Ik passeren in. Deze functie veranderen van kleur is verwacht een argument genoemd kleur. En ik zeg stel de achtergrondkleur op kleur. Dus hier staat wat ik hier heb. Dus dat is een beetje beter. 

Maar ik zou in staat zijn om beter doen dan dat. Als we naar beneden gaan om een ​​kijkje te nemen op het evenement handler situatie, nu al deze oproepen hetzelfde uitzien. Misschien herinner je je voor onze bespreking van event handlers, Ik kan informatie over welke van krijgen deze knoppen werd geklikt en dat gebruiken. 

En zo in event.JavaScript, ik heb schriftelijke kleur veranderen evenement, dat cijfers uit welke knop is geklikt. Dat is de trigger object lijn. En dan hier, het wordt echt langdradig. Maar wat ik doe is dat ik ben instellen van de achtergrond kleur triggerObject inner.HTML. Dat is de tekst in tussen de knop labels. 

En dan heb ik blijkbaar in te stellen naar kleine letters. En dat is hoe ik een hele kan omzetten string naar kleine letters in met behulp van JavaScript die methode naar kleine letters. Want als ik een kleur, als ik probeer te doen hier, de kleur heeft om alle kleine letters zijn. 

Maar de knop die ik had, Als we nog eens kijken, merken dat de tekst er is geschreven met een hoofdletter P paars. En vervolgens bij de bottom hier, ik blijkbaar proberen en doen dit met behulp van jQuery ook. En in dit geval, ik ben niet echt aanroep van een functie helemaal. Ik heb net gezegd de klasse die ik ben met behulp van deze knop is een jQ knop. Dat is het. 

Dus hoe jQuery weet wat ik doe? Nou, dit is een van de voordelen slash nadelen van jQuery. Het kan mij toe om dingen te doen zeer beknopt, maar misschien niet als intuïtief. Misschien die andere drie maken beetje voelen wat ik doe. Hier, hoewel, wat is er aan de hand? 

Blijkbaar creëren een anonieme functie die wordt geladen wanneer mijn document is klaar, dus document.ready, een functie gaat gebeuren. Kortom, wanneer is een document klaar is? Het is toen mijn pagina is geladen. 

Dus zodra mijn pagina is geladen, de volgende functie staat altijd klaar. Het zegt, als een object van het type jQButton, of als de klasse jQButton is geklikt, deze functie uit te voeren. Dus hier is twee anonieme functies, een gedefinieerd binnen de andere. 

Dus mijn hele context hier tot nu toe is mijn pagina wanneer het laadt het deze functie noemt. En deze functie wacht voor een knop te worden geklikt. En wanneer een knop wordt geklikt, JQ knop specifiek wordt geklikt, het op deze andere gesprekken functie, die gaat de achtergrond set kleur colorDiv te wat tekst tussen de labels. 

Dit is het begrip welke knop is geklikt. Maar voor de rest, dit is een soort van gedraagt ​​vergelijkbaar met een event. Het is gewoon dezelfde manier als ik zou dit uit te drukken in jQuery. Nogmaals, het is waarschijnlijk een veel meer intimiderend. Het is niet zo duidelijk als iets als event.js, dat is misschien een beetje meer breedsprakig, maar een beetje minder intimiderend. 

Maar als we pop terug naar mijn browser venster, als ik begin clicking-- goed, dat veranderde tot paars. Dit is groen met het string methode. Dit is oranje met behulp van de event handler. 

Dit is rood met behulp van jQuery, toch? Ze gedragen zich allemaal precies hetzelfde. Ze doen het gewoon met behulp van verschillende zal het probleem op te lossen. Er is veel meer aan jQuery dan zijn we zeker gaan praten over deze video. Maar als je meer wilt weten, kunt u ga naar de jQuery soort documentatie en leren nogal een beetje meer over Deze zeer flexibel bibliotheek, die is zeer geschikt voor het doen van client-side scripting zoals wat we deden om het uiterlijk te manipuleren en feel van onze website met het Document Object Model. Ik ben Doug Lloyd. Dit is CS50.