DOUG LLOYD: In hierdie video, ons wou om uit te roep aparte aandag om 'n baie besondere element van JavaScript wat jy dalk nuttig vind wanneer jy begin om te werk op te manipuleer webblaaie en die inhoud van jou web bladsy te verander op die vlieg. En dit is die idee van die Document Object Model. So as ons gesien het in ons video op JavaScript, voorwerpe is baie buigsaam. En hulle kan verskeie velde bevat. En al het ons nie in 'n baie gaan detail, daardie velde of eienskappe, dat ons sou waarskynlik meer hulle gepas noem in die konteks van 'n voorwerp, selfs daardie eiendomme kan ander voorwerpe. En binnekant van die voorwerpe kan ander voorwerpe. 

Jy het hierdie baie groot voorwerp met 'n baie ander voorwerpe binnekant van dit, wat soort van skep die idee van 'n groot boom. Nou, die dokument is 'n voorwerp baie spesiale voorwerp in JavaScript dat jou hele web organiseer bladsy onder hierdie soort van sambreel van 'n voorwerp. En so binnekant van die dokument voorwerp is voorwerpe aanbieding die kop en liggaam van jou webblad. 

Binnekant van die ander voorwerpe, ensovoorts, ensovoorts, totdat jou hele webblad het georganiseer is in hierdie groot voorwerp. Wat is die onderstebo hier, reg? Wel, ons weet hoe om te werk met voorwerpe in JavaScript. 

So as ons 'n voorwerp wat verwys na ons hele webblad, wat beteken deur die roeping van die korrekte metodes om daardie voorwerp te manipuleer of wysiging van sekere van sy eienskappe, ons kan die elemente van verandering ons blad programmaties die gebruik van JavaScript in plaas van om om dinge met, sê, HTML-kode. So hier is 'n voorbeeld van 'n baie eenvoudige webblad, reg? Dit het HTML tags, 'n kop. 

Binnekant van daar is 'n titel, hello wêreld. Dan het ek 'n liggaam. Binnekant van dit, ek het drie verskillende dinge. Ek het 'n h2 kop tag, 'n paragraaf, en 'n skakel. Dit is 'n baie eenvoudige webblad. 

Wel, wat kan die dokument beswaar vir hierdie lyk? Wel, dit is 'n bietjie scary miskien by die eerste. Maar dit is regtig net 'n groot boom. En by die wortel van dit is n dokument. 

Binnekant van die dokument is 'n ander voorwerp verwys na die HTML van my bladsy. En die HTML van my bladsy is al hierdie dinge. En dan binnekant van die HTML voorwerp, ek het 'n kop voorwerp, wat verwys na alles wat daar. 

En binnekant van daar, Ek het 'n titel voorwerp. En binnekant van daar, ek het 'n ander beswaar dis net hello world. Ek kon my liggaam verteenwoordig soos hierdie. 

Binnekant van my liggaam, ek het 'n h2 voorwerp en 'n p voorwerp paragraaf en 'n voorwerp 'n vir 'n skakel. En so hierdie hele hiërargie kan word as 'n groot boom met baie van die kleiner bietjie dinge kom uit dit uit. Nou, natuurlik, wanneer ons programmering, ons dink nie dinge soos 'n groot boom. Ons wil sien werklike kode verwante dinge. 

En gelukkig, ons kan gebruik ons ​​ontwikkelaar gereedskap om werklik 'n blik op se hierdie webwerf dokument voorwerp. En laat ons dit doen. So Ek het 'n blad leser oopgemaak. 

En ek het Developer Tools oopgemaak. En in my video op JavaScript, I genoem dat die konsole is nie net iewers waar ons druk inligting, dit is ook 'n plek waar Ons kan insette inligting. In hierdie konteks, wat Ek gaan om te sê, is Ek wil graag om terug te kry die dokument voorwerpe, sodat ek kan begin om 'n blik op dit. So hoe kan ek dit doen? Wel, as ek wil organiseer dit regtig mooi, Ek gaan om te sê console.dir, D-I-R. Nou, ek gebruik console.log net druk iets baie eenvoudig. Maar as ek wil organiseer hierargies soos 'n voorwerp, Ek wil dit soort van gestruktureerde soos 'n directory struktuur. 

So ek wil dokument console.dir. Ek gaan druk Enter. En reg onder dit nou, en ek sal hier zoom, Ek het hierdie reaksie dokument het met 'n bietjie pyltjie langs dit. Nou, wanneer ek dit pyl oopmaak, daar gaan 'n baie dinge wees. 

Maar ons gaan 'n baie te ignoreer dit en net soort van fokus op die belangrikste deel, sodat ons kan begin om hierdie dokument te navigeer. Daar is 'n baie meer om die DOM as net ouer en kind nodes nodes. Daar is 'n baie ondergeskikte dinge. 

So ek gaan om dit te open. En daar is 'n hele klomp dinge wat verskyn. Maar al wat ek omgee is reg hier, kind nodes. Kom ons oop te maak. 

Binnekant van daar sien ek iets bekende, HTML. So binnekant van ons dokument een vlak af, HTML. Ek oop te maak. Wat verwag ons? 

As jy onthou van ons diagram, Wat moet ons vind binnekant van HTML? Watter twee nodes is onder dit in die boom? Kom ons vind uit. Ons open HTML. Ons gaan af na die kind nodes. 

Pop wat oop. Daar is kop en liggaam. En ons kan maak die kop. Gaan na die kind nodes. Wel, daar is die titel. 

En ons kon gaan en soos hierdie vir ewig. Ons kan dit doen met die liggaam sowel. Maar daar is 'n manier vir ons om te kyk na die dokument georganiseer as 'n groot voorwerp. En as ons kyk na 'n groot voorwerp wat 'n baie lyk soos code, dit beteken dat ons kan begin om hierdie groot voorwerp te manipuleer met behulp van kode te verander wat ons webwerf lyk en voel. 

So dit is 'n mooi kragtige instrument ons het tot ons beskikking nou. So as ons nou net gesien het, die dokument voorwerp self en al die voorwerpe binnekant van dit het eienskappe en metodes, net soos enige ander voorwerp wat ons het is besig met in JavaScript. Maar ons kan die eienskappe te gebruik gebruik die metodes om soort van boor af van die groot dokument en kry laer en laer en laer, fyner en fyner korrels detail, totdat ons kry om 'n baie spesifieke stukkie van ons webblad wat ons wil om te verander. 

En toe ons eienskappe van die werk Dokumenteer voorwerp of bel daardie metodes, dinge kan gebeur op ons webblad. En ons het nie nodig om enige verfrissende doen om die veranderinge in werking tree. 

En dit is 'n pretty cool vermoë om wanneer ons werk met 'n kode. So, wat is 'n paar van hierdie eienskappe wat deel is van 'n dokument voorwerp? Wel, het jy waarskynlik het 'n paar van hulle werklik vinnig as ons aanritsen deur die reuse-dokument voorwerp sien ons net in die web browser. 

Maar 'n paar van hierdie eienskappe dalk dinge soos innerlike HTML. En jy kan selfs onthou my die gebruik van hierdie in die JavaScript video aan die einde wanneer ek praat oor die gebeure. Wat was hierdie innerlike HTML? Wel, dit is net wat tussen die tags. 

En so het die innerlike HTML, byvoorbeeld, van die titel tag, as ons aan die gang gehou in wat byvoorbeeld 'n oomblik gelede sou die wêreld gewees hallo. Dit was die titel van ons blad. Ander eienskappe sluit node naam, wat is die naam van 'n HTML element soos die titel. ID, wat is die ID kenmerk van 'n HTML element. 

Onthou dat ons spesiaal kan aandui spesifieke elemente van ons HTML met 'n ID kenmerk, wat gewoonlik handig te pas kom in die konteks van CSS, spesifiek. Ouer knoop, wat is 'n verwysing na wat net bo my in die DOM. En kind nodes, wat 'n verwysing na wat is af onder my. En ons het 'n baie van daardie net deur te kyk. Kind nodes, dit is hoe ons laer en laer in die boom. 

Eienskappe, dit is net 'n skikking van die eienskappe van die HTML element. So 'n voorbeeld van die eienskappe mag wees as jy 'n beeld tag, dit het gewoonlik 'n bron kenmerk, miskien 'n hoogte en 'n breedte kenmerk. En so sou dit net 'n verskeidenheid wees van al die eienskappe wat verband hou met daardie HTML element. 

Styl is 'n ander een wat verteenwoordig nie die CSS stilering van 'n bepaalde element. En later in hierdie video, sal ons spesifiek hefboom styl om 'n paar te maak van veranderinge aan ons webwerf. So dit is 'n paar eienskappe. 

En daar is ook sommige metodes wat ons kan gebruik om ook vinniger miskien isoleer elemente van die dokument voorwerp. Miskien, die mees veelsydige poste getElementById. So ek kan sê iets soos, want onthou dit is 'n metode van die dokument Beswaar, document.getElementById. 

En binnekant van die hakies, spesifiseer 'n HTML-element met 'n bepaalde ID skryf dat ek voorheen stel, en ek sal onmiddellik gaan reg om daardie element van die algehele webwerf. So ek hoef nie te boor miskien af deur elke enkele laag. Ek kan net gebruik hierdie metode om dit te vind, soort van soos 'n hitte-soekende missiel, reg? Dit gaan net en vind presies wat dit soek. 

GetElementsByTagName is baie soortgelyk in die gees. Miskien is dit sal al die vind vet tags of al die p tags en gee my 'n verskeidenheid van alles dat ek kan dan werk. appendChild voeg iets een vlak in die boom. 

So ek kan 'n hele nuwe voeg element een vlak laer. Of ek kan 'n element wat is verwyder een vlak laer as goed as ek wil om iets van my webblad verwyder. Nou, 'n vinnige kodering kennis en 'n vinnige hoofpyn spaar noot, hopelik. 

getElementById-- die d is klein. Ek kan jou nie sê hoeveel keer ek gebruikte getElementById en gekapitaliseer die d daar. Want dit is baie algemeen. As ons skryf die woord ID, dit is gewoonlik kapitaal ek kapitaal D. En my kode net nie werk nie. En ek kan nie uitvind hoekom. Dit is 'n baie, baie, baie algemene fout wat almal maak, selfs deskundiges wat is dit vir ewig doen. Dus net bewus wees, getElementById, dat d is klein. En hopelik, dat jy 'n paar spaar minute ten minste hartseer. 

So wat beteken dit alles vir ons sê? Ons het hierdie metodes. Ons het hierdie eienskappe. Nou, as ons begin by dokument, dokument. wat ook al, ons kan nou enige enkele stuk van ons webblad wat ons wil met behulp van JavaScript net deur die roeping van hierdie metodes en die gebruik van die eienskappe dat ons op verskeie plekke. 

Dit kan kry langdradig, hierdie document.getElementByID, Miskien het 'n lang tag naam miskien meer oproepe te doen wat jy later. Dinge kan kry 'n bietjie langdradig. En as programmeerders, as jy het waarskynlik gesien word in baie van hierdie video's, ons hou nie langdradig dinge. 

Ons wil graag in staat wees om dinge vinnig te doen. So wil ons graag 'n meer bondige manier om iets te sê. So hierdie soort van lei tot die idee van iets genoem jQuery. Nou jQuery is nie JavaScript. Dit is nie deel van JavaScript. 

Dit is 'n biblioteek wat geskryf is deur sommige JavaScript programmeerders ongeveer 10 jaar gelede. En sy doel is om dit wat is vereenvoudig genoem kliënt kant skripte, wat is basies wat ons was net praat oor met DOM manipulasies. En so as ek wou die verander agtergrond van my webblad, miskien 'n spesifieke Div. 

Hier, ek glo om ElementById colorDiv. En ek wil sy agtergrond kleur te stel. As ek net die gebruik van suiwer JavaScript die gebruik van die Document Object Model, dit is 'n baie dinge, reg? document.getElementByID colorDiv.style.backgroundColor = groen. 

Sjoe. Dit was 'n baie te sê. Dit is 'n baie om te tik, ook. En so in jQuery, kan ons dalk sê dit 'n bietjie meer saaklik. Die vakbond af om dit miskien 'n bietjie bietjie meer kriptiese al van 'n skielike, reg? 

Ten minste is die lank is 'n bietjie meer Verduidelikende as wat ons doen. Dit dollar teken hakies, enkele aanhaling, hash, colorDiv, reg? Wat beteken dit? Wel, dit is basies net document.getElementByID colorDiv. 

Maar dit is hierdie soort van snelskrif manier om dit te doen met behulp van jQuery. Kom nou net 'n blik op 'n paar van die verskillende maniere dat ek kan eintlik gebruik van hierdie dokument Object Model om die stukke van my site te manipuleer. In die besonder, ons gaan om saam te werk op te manipuleer die kleur van 'n bepaalde Div, colorDiv, op 'n webblad. So laat ons neem 'n blik op dit. Alles reg. So ek is op 'n bladsy. Dit is bekend as test.html wanneer jy dit aflaai hierdie as jy wil geknoei met hierdie. En ek het 'n klomp van die het knoppies op hierdie bladsy. En ek is individuele funksies sê vir die agtergrond, pers, groen, oranje, rooi, blou, 'n enkele funksie vir die agtergrond, event handler vir die agtergrond, en met behulp van jQuery. Wat praat ek wanneer ek dit doen? So het ons die knoppies gesien. Nou, laat ons 'n blik op sommige van die bronkode hier. Ons begin met test.html. So individuele funksies vir agtergrond kleur is wat ek hier getik het. Laat my blaai 'n bietjie. 

En jy sal sien dat ek het hierdie knoppies gedefinieer om te sê wanneer die knoppie is gekliek het, noem die funksie draai pers. Wanneer hierdie knoppie klik, eerder, noem die funksie groen, draai oranje, rooi, blou. Jy kan seker raai dat dit is miskien nie die beste ontwerp sin, reg? 

Dit sal lekker wees as ek kon 'n meer algemene benadering. Wel, die eerste sal ons 'n blik na wat die vyf funksies document.getElementByID colorDiv.style.background = pers, groen, oranje, rooi, en blou, onderskeidelik. So, veral nie die beste ontwerp. 

Die volgende stel knoppies Ek het is ek geskryf 'n enkele funksie genoem kleur te verander wat blykbaar aanvaar 'n string as sy argument. So, dit is 'n bietjie beter. Pers, groen, oranje, rooi, blou is nou 'n argument. So ek geskryf 'n meer algemene geval JavaScript-funksie, wat iets soos hierdie kan kyk. Ek is verby in. Hierdie funksie verander van kleur is verwag 'n argument genoem kleur. En ek sê sit die agtergrond kleur. So hier verteenwoordig wat ek hier het. So dit is 'n bietjie beter. 

Maar ek dalk in staat wees om doen beter as dit. As ons gaan af na 'n blik by die event handler situasie Maar al hierdie oproepe dieselfde lyk. As jy onthou vir ons bespreking oor event handlers, Ek kan inligting oor watter van kry hierdie knoppies is gedruk en gebruik dit. 

En so in event.JavaScript, ek het geskryf kleur verander gebeurtenis, wat figure uit watter knoppie is gekliek. Dit is die sneller voorwerp lyn. En dan hier, is dit regtig langdradig. Maar wat ek doen, is ek is die opstel van die agtergrond kleur triggerObject inner.HTML. Dit is die teks in tussen die knoppie tags. 

En dan moet ek glo om dit te stel om onderkas. En dit is hoe ek 'n hele kan omskep string om onderkas in JavaScript behulp hierdie metode om onderkas. Want as ek 'n kleur, as ek probeer om hier te doen, die kleur het al klein wees. 

Maar die knoppie wat ek gehad het, As ons weer na, sien dat die teks is daar geskryf met 'n kapitale P vir pers. En dan op die heel onderkant hier, ek glo probeer en doen dit met behulp van jQuery sowel. En in hierdie geval, ek is nie eintlik roep 'n funksie op alle. Ek het net gesê die klas wat ek is die gebruik van hierdie knoppie is 'n JQ knoppie. Dis dit. 

So hoe jQuery weet wat ek doen? Wel, dit is een van die voordele streep nadele van jQuery. Dit kan nie toelaat dat my om dinge te doen baie saaklik, maar miskien nie as intuïtief. Miskien is die ander drie maak 'n bietjie meer sin wat ek doen. Hier, al is, wat gaan aan? 

Blykbaar, skep 'n anonieme funksie dat baie wanneer my dokument is gereed, so document.ready, 'n funksie gaan gebeur. Basies, wanneer 'n dokument gereed? Dit is wanneer my bladsy gelaai. 

So gou as my bladsy gelaai, die volgende funksie is altyd gereed. Dit sê, as 'n voorwerp van die tipe jQButton, of as klas jQButton is gekliek, die funksie te verrig. So hier is twee anonieme funksies, een gedefinieer binnekant van die ander. 

So my hele konteks hier is so ver my bladsy wanneer dit laai dit op hierdie funksie noem. En hierdie funksie wag vir 'n knoppie te gebruik. En wanneer 'n knoppie is gekliek het, JQ knoppie spesifiek word gebruik, dit hierdie ander oproepe funksie, wat gaan om die agtergrond te stel kleur van colorDiv te wees watter teks is in tussen die tags. 

Dit is die idee van watter knoppie is gekliek. Maar anders, hierdie is 'n soort van gedra soortgelyk aan 'n gebeurtenis. Dis net die dieselfde manier wat ek sou dit uit te druk in jQuery. Weereens, dit is waarskynlik 'n baie meer intimiderend. Dit is nie so duidelik as iets soos event.js, wat is miskien 'n bietjie meer verbose, maar 'n bietjie minder bietjie intimiderend. 

Maar as ons pop terug oor my browser venster, as ek begin clicking-- goed, dit verander na pers. Dit is die gebruik van die groen string metode. Dit is oranje met behulp van die event handler. 

Dit is rooi met behulp van jQuery, reg? Hulle het almal gedra presies dieselfde. Hulle doen dit net met behulp van verskillende benaderings tot die probleem op te los. Daar is 'n baie meer om jQuery dan is ons beslis gaan om te praat oor wat in hierdie video. Maar as jy meer wil leer, kan jy gaan na die jQuery soort van dokumentasie en leer nogal 'n bietjie meer oor hierdie baie buigsaam biblioteek, wat is 'n groot vir die doen kliënt kant script soos wat ons doen om die voorkoms te manipuleer en voel van ons webblad met die dokument Object Model. Ek is Doug Lloyd. Dit is CS50.