DOUG LLOYD: En ĉi tiu video, ni volis voki apartan atenton al tre aparta elemento de Ĝavoskripto ke vi eble trovos oportuna kiam vi komencas labori sur manipulanta retpaĝoj kaj ŝanĝante la enhavon de via retpaĝo sur la muŝo. Kaj tio estas la nocio de la Dokumento Object Model. Do kiel ni vidis en nia vídeo sur Ĝavoskripto, celoj estas tre fleksebla. Ili povas enhavi diversajn kampojn. Kaj kvankam ni ne eniris multajn detalo, tiuj kampoj aŭ proprietoj, ke ni versxajne pli taŭge nomi ilin en la kunteksto de objekto, eĉ tiuj propraĵoj povas esti aliaj objektoj. Kaj ene de tiuj objektoj povas esti aliaj objektoj. 

Vi havas tiun tre granda objekto kun multaj aliaj objektoj interne de ĝi, kiun ia kreas tiun ideon de granda arbo. Nun, la dokumento objekto estas tre specialan celon en JavaScript kiu organizas via tuta retejo paĝo sub ĉi tia ombrelo de objekto. Kaj tiel ene de la dokumento objekto estas celoj prezentado la kapo kaj korpo de via retpaĝo. 

Ene de tiuj estas aliaj objektoj, kaj tiel plu, kaj tiel plu, ĝis via tuta retpaĝo havas estis organizita en tiu granda objekto. Kio estas la upside tie, ĉu ne? Nu, ni scipovas labori kun objektoj en JavaScript. 

Do se ni havas objekton ke rilatas al nia tuta retpaĝo, ke signifas nomante la korekta metodoj manipuli tiun objekton aŭ modifi iujn de liaj proprietoj, ni povas ŝanĝi la elementojn de nia paĝo programmatically uzante JavaScript anstataŭ havi kodigi aferoj kun, ekzemple, HTML. Do jen ekzemplo de tre simpla retpaĝo, ĉu ne? Oni alvenis HTML etikedoj, kapo. 

Ene de tie estas titolo, saluton mondo. Tiam mi havas korpon. Ene de tio, mi havas tri malsamaj aferoj. Mi havas h2 kaplinio etikedo, alineon, kaj ligilo. Tio estas tre simpla retpaĝo. 

Nu, kio povus la dokumenton kontesti por tiu aspektas? Nu, estas iom timiga eble unue. Sed estas vere nur granda arbo. Kaj ĉe la radiko de ĝi estas dokumento. 

Ene de la dokumento estas alia objekto raportante al la HTML de mia paĝo. Kaj la HTML de mia paĝo estas ĉio ĉi. Kaj poste ene de la HTML objekto, mi havas kapon objekto, kiu rilatas al ĉiu tie. 

Kaj ene de tie, Mi havas titolon objekto. Kaj ene de tie, mi havas alian kontesti ke estas nur saluton mondo. Mi povus havi mian korpon reprezentitaj kiel tiu. 

Ene de mia korpo, mi havas h2 objekto kaj p objekto por paragrafo kaj oni al objekto por ligilon. Kaj do ĉi tiu tuta hierarkio povas esti prezentita kiel granda arbo kun multaj malgrandaj iom estontajxoj el ĝi. Nun, kompreneble, kiam ni programado, ni ne pensu pri aĵoj kiel granda arbo. Ni volas vidi fakta Kodo Rilataj aferoj. 

Kaj feliĉe, ni povas uzi nian programisto iloj efektive rigardu tiu retejo la dokumenton objekto. Kaj ni faras tion. Do mi malfermis retumilo langeto. 

Kaj mi malfermis Developer Tools. Kaj en mia video sur Ĝavoskripto, menciis ke la konzolo ne estas nur someplace kie ni presi informo, ĝi estas ankaŭ loko kie ni povas enigo informo. En tiu kunteksto, kion Mi tuj diros estas Mi ŝatus reiri la dokumenton objektoj, do mi povas komenci havi rigardon ĉe ĝi. Do kiel povus mi tion faras? Nu, se mi volas organizi vere bele, Mi tuj diru console.dir, D-mi-R. Nun, mi uzas console.log al nur presita el io tre simpla. Sed se mi volas organizi ĉi hierarkie kiel objekto, Mi volas ĝin ia strukturita kiel dosierujo strukturo. 

Do mi volas console.dir dokumento. Mi tuj batis Enter. Kaj ĝuste sub ĝi nun, kaj Mi zomi tie, Mi havas tiun respondon dokumenton kun iom sago apud ĝi. Nun, kiam mi malfermas tiun sagon, Tie tuj estos multe da taskoj. 

Sed ni tuj ignori multajn el gxi kaj nur speco de fokuso sur la plej gravan parton, tiel ni povas komenci navigi ĉi dokumento. Estas multe pli al la DOM ol nur patro nodoj kaj infanaj verticoj. Ekzistas multe de helpaj stuff. 

Do mi tuj malfermos ĉi supre. Kaj ekzistas tuta amaso de aĵoj kiuj krevas supre. Sed ne gravas al mi pri estas ĉi tie, infanaj verticoj. Ni malfermu ke ĝis. 

Ene de tie mi vidas io familiara, HTML. Do ene de nia dokumenton unu nivelon malsupren, HTML. Mi malfermu ke ĝis. Kion ni atendas? 

Se vi memoras de diagramo, kion ni trovas ene de HTML? Kion du nodoj estas sub ĝi en la arbo? Ni trovu. Ni malfermu HTML. Ni iru en lian infanon nodoj. 

Pop ke malferma. Ekzistas kapo kaj korpo. Kaj ni povas malfermi la kapo. Iru al liaj infanaj verticoj. Nu, Tie estas la titolo. 

Kaj ni povus daŭrigi kaj sur kiel tiu ĉiam. Ni povus fari tion kun korpo tiel. Sed ekzistas maniero por ni por rigardi la dokumenton organizita kiel granda objekto. Kaj se ni rigardas estas granda objekto kiu aspektas multe kiel kodo, kiu signifas, ke ni povas starti manipuli tiun grandan objekton uzante kodo ŝanĝi kion nia retejo aspektas kaj sentas. 

Do jen bela potenca ilo ni havos je nia dispono nun. Do kiel ni ĵus vidis, la dokumenton objekton mem kaj ĉiujn la objektoj ene de gxi havi proprietojn kaj metodoj, simple kiel iu ajn alia objekto, kiujn ni laboris kun en JavaScript. Sed ni povas uzi tiujn proprietojn kaj uzi tiujn metodojn al ia bori malsupren el la granda dokumento kaj akiri pli kaj pli kaj pli malalten, pli fajna kaj pli fajna grenoj de detalo, ĝis ni akiri al tre specifa peco de nia retpaĝo kiun ni volas ŝanĝi. 

Kaj kiam ni ĝisdatigi propraĵoj de la Dokumenti Objekto aŭ voki la metodoj, aferoj povus okazi sur nia retpaĝo. Kaj ni ne bezonas fari neniun refreŝiga havi tiujn ŝanĝojn efektiviĝos. 

Kaj tio estas sufiĉe freŝa kapablo havi kiam ni laboras kun kodo. Do kio estas kelkaj el tiuj propraĵoj kiuj estas parto de dokumento objekto? Nu, vi probable vidis paro de ili vere rapide kaj ni estis zipping tra la giganto dokumenton objekto ni ĵus vidis en la retumilo. 

Sed kelkaj tiuj propraĵoj povus esti aĵoj kiel interna HTML. Kaj eble vi eĉ memoras min uzante ĉi en la Javascript video ĉe la fino mem, kiam mi parolis pri eventoj. Kio estis tiu interna HTML? Nu, estas nur kio estas en inter la etikedoj. 

Kaj tiel la interna HTML, ekzemple, de la titolo etikedo, se ni konstante en ke ekzemple antaŭ momento, estus estinta saluton mondo. Tio estis la titolo de nia paĝo. Aliaj propraĵoj inkluzivas noda nomo, kiun estas la nomo de HTML elemento kiel ekzemple titolo. ID, kiu estas la ID atributo de HTML elemento. 

Memoru ke ni povas speciale indiki specifaj elementoj de nia HTML kun ID atributo, kiu kutime venas en oportuna en la kunteksto de CSS, specife. Parent nodo, kio estas referenco al kio estas ĵus super mi en la DOM. Kaj infanaj verticoj, kio estas referenco al kio estas malsupre mi. Kaj ni vidis multajn ke nur rigardanta tra. Infanaj verticoj, tiel estas kiel ni akiris pli kaj pli malsupren sur la arbo. 

Atributoj, tio estas nur tabelo de atributoj de la HTML elemento. Do ekzemplo de atributoj povus se vi havas dosieron etikedo, ĝi kutime havas fonton atributo, eble alteco kaj larĝeco atributo. Kaj tial ke nur estus tabelo de ĉiuj atributoj asociitaj kun tiu HTML elemento. 

Stilo estas alia ke does reprezenti la CSS stilo de aparta elemento. Kaj pli poste en ĉi video, ni konkrete levilforton stilon por fari duon de ŝanĝoj al nia retejo. Do tiuj estas iuj propraĵoj. 

Estas ankaux kelkaj metodoj kiujn ni povas uzi ankaŭ pli rapide eble izoli elementoj de la Dokumento Object. Eble, la plej diverstalentaj el tiuj estantaj getElementById. Do mi povus diri ion kiel, ĉar memoru ĝi estas metodo de la Dokumento Objekto, document.getElementByID. 

Kaj ene de tiuj krampoj, specifi HTML elemento kun aparta ID atribui ke mi havas antaŭe fiksita, kaj mi tuj iri rajton al tiu elemento de la entuta retejo. Do mi ne devas eble bori malsupren tra ĉiu ununura tavolo. Mi povas nur uzi tiun metodon por trovi ŝin, ia kiel varmo serĉanta misilo, dekstra? Ĝi ĵus iras kaj trovas ĝuste kio ĝi estas serĉanta. 

GetElementsByTagName estas tre simila en spirito. Eble ĉi trovus ĉiujn aŭdaca etikedoj aŭ ĉiuj de la p-etikedoj kaj donu al mi aron de ĉio ke mi povus tiam labori kun. appendChild aldonas ion unu nivelon malsupren en la arbo. 

Do mi povas aldoni tutan novan elemento unu nivelon pli malalta. Aŭ mi povas forigi elementon tio unu nivelon pli malalta tiel se mi volas forigi ion de mia retpaĝo. Nun, rapida kodigo noton kaj rapida kapdoloro savanta noto, espereble. 

getElementById-- la d estas minuskla. Mi ne povas diri al vi kiom da fojoj mi devas uzita getElementById kaj majuskloj la d tie. Ĉar ĝi estas vere oftaj. Se ni skribas la vorton ID, ĝi estas kutime ĉefurbo Mi ĉefurbo D. Kaj mia kodo simple ne funkcias. Kaj mi ne povas diveni kial. Jen vere, vere, vere komuna cimon ke ĉiuj faras, eĉ spertuloj kiuj havas estis farante tion por ĉiam. Do nur konscii, getElementById, ke d estas minuskla. Kaj espereble, ke savas vin pluraj minutoj almenaŭ de aflikton. 

Do kion signifas ĉio ĉi diru al ni? Ni havas tiujn metodojn. Ni havas tiujn trajtojn. Nun, se ni komencos de dokumento, dokumento. ajn, ni povas nun akiri al ajna ununura peco de nia retpaĝo ke ni volas uzi JavaScript nur nomante tiujn metodojn kaj ekspluatanta la propraĵoj ke ni trovos en diversaj lokoj. 

Tio povas akiri wordy, ĉi document.getElementByID, eble havas longan etikedo nomon eble vi fari pli vokoj poste. Aĵoj povas akiri iom wordy. Kaj kiel programistoj, kiel vi havas verŝajne vidis en multaj de ĉi tiuj vídeos, ni ne ŝatas wordy aferojn. 

Ni ŝatus esti kapabla fari aferojn rapide. Do ni ŝatus pli konciza maniero diri ion. Do tiu speco de kondukoj al la nocio de io nomata jQuery. Nun jQuery ne Javascript. Ĝi ne estas parto de Ĝavoskripto. 

Estas biblioteko kiu estis skribita de iu Javascript programistoj proksimume antaŭ 10 jaroj. Kaj lia celo estas simpligi ĉi kio estas nomita kliento flanko scripting, kio estas esence kion ni ĵus parolas kun DOM manipuladoj. Kaj do se mi volis modifi la fonkoloro de mia retpaĝo, eble specifa Div. 

Ĉi tie, mi ŝajne ricevas ElementById colorDiv. Kaj mi volas agordi lian fonkoloro. Se mi simple uzante puran Ĝavoskripto uzante la Document Object Model, ke estas multe da taskoj, dekstra? document.getElementByID colorDiv.style.backgroundColor = verda. 

Whew. Tio estis multe diri. Estas multa tajpi, tro. Kaj tiel en jQuery, ni povas eble diri ĉi iom pli koncize. La komerco ekstere estanta ĝi estas eble iom iom pli kripta subite, dekstra? 

Almenaŭ la longa estas iom pli klariga kiel al kion ni faras. Ĉi dolaro signo, krampoj, sola citaĵo, hash, colorDiv, dekstra? Kion tio signifas? Nu, tio estas esence nur document.getElementByID colorDiv. 

Sed estas ĉi tia stenografio maniero fari ĝin uzante jQuery. Ni simple rigardu nun ĉe kelkaj malsamaj manieroj Por ke mi reale uzi ĉi Dokumento Objekto Modelo manipuli pecojn de mia paĝaro. En aparta, ni tuj esti laboranta sur manipulanta la koloro de aparta Div, colorDiv, en retpaĝo. Do ni rigardu tion. Bone. Do mi estas en paĝo. Ĝi nomiĝas test.html kiam vi elŝutas ĉi se vi volas toquetear ĉi. Kaj mi havas faskon da butonojn sur ĉi tiu paĝo. Kaj mi diras individuaj funkcioj por fona koloro, purpura, verda, oranĝa, ruĝa, blua, unu nura funkcio por fonkoloro, okazaĵo traktilo por fona koloro kaj uzante jQuery. Kion mi parolas kiam mi faras tion? Do ni vidis la butonoj. Nun, ni rigardu iuj de la fontkodo tie. Ni komencu kun test.html. Do individuaj funkcioj por fono koloro estas kion mi tajpis ĉi tie. Lasu min rulumi iomete. 

Kaj vi rimarkos ke mi difinis tiujn butonojn diri kiam la butono estas klakita, vokas la funkcion turni purpura. Kiam tiun butonon estas klaki prefere vokas la funkcion turnas verda, turni oranĝo, turni ruĝa, turnu blua. Vi versxajne povas diveni ke ĉi eble ne la plej bona dezajno senco, ĉu ne? 

Estus agrable, se mi povus havas pli ĝeneralan aliron. Nu, unue ni rigardu ĉe kio tiuj kvin funkcioj estas document.getElementByID colorDiv.style.background = purpuro verda, oranĝa, ruĝa, kaj blua, respektive. Do, ne estas precipe la bona dezajno. 

La venonta aro de butonoj Mi estas mi skribis sola funkcio nomita ŝanĝi koloro kiu ŝajne Akceptas ĉenon kiel ĝia argumento. Do tiu estas iomete pli bona. Purpura, verda, oranĝa, ruĝa, blua nun estas argumento. Do mi skribis pli ĝenerala kazo Javascript funkcio, kiu eble aspektas tiel. Mi pasante en. Tiu funkcio ŝanĝo koloro estas atendante argumento nomita koloro. Kaj mi diras starigis la fonkoloro al koloro. Do tie reprezentas kio mi havas ĉi tie. Do tio estas iom pli bone. 

Sed mi eble povos Pli bone ol tio. Se ni iras, por rigardi ĉe la okazaĵo traktilo situacio, nun ĉiuj tiuj alvokoj aspektas same. Se vi memoras nian diskuto sur okazaĵo manipuladores, Mi povas akiri informojn pri kiu el tiuj butonoj estis klakita kaj uzi tiun. 

Kaj tiel en event.JavaScript, mi havas skribita ŝanĝo koloro okazaĵo, kiu figuroj el kiu butono estis klakita. Jen la ellasilon objekto linio. Kaj tiam tie, ĝi ricevas vere wordy. Sed kion mi faras estas mi fiksanta la fono koloro al triggerObject inner.HTML. Jen la teksto en inter la butono etikedoj. 

Kaj tiam mi ŝajne havas por restarigi gxin al minuskla. Kaj tiel estas kiel mi povas konverti tutan ŝnuro al minuskla en JavaScript uzanta ke telefono al minuskla. Ĉar kiam Mi starigis koloron, kiel mi provas fari tie, la koloro devas esti ĉiuj minuskle. 

Sed la butono kiun mi havis, se ni prenas alian aspekton, rimarki ke la teksto estas skribita kun majuskla P por purpura. Kaj tiam ĉe la tre fundo tie, mi ŝajne klopodi fari tion uzante jQuery tiel. Kaj en ĉi tiu kazo, mi ne vere nomante funkcio ajn. Mi ĵus diris la klaso kiu mi estas Uzante por tiu butono estas JQ butonon. Jen ĝi. 

Do kiel jQuery scias kion mi faras? Nu, tiu estas unu el la avantaĝoj oblikvo malavantaĝoj de jQuery. Ĝi povas permesi ke mi faru aferojn tre koncize, sed eble ne kiel intuicie. Eble tiuj aliaj tri faras iom pli sentita kion mi faras. Ĉi tie, tamen, kio okazas? 

Ŝajne, kreante anonima funkcio ke ŝarĝoj kiam mia dokumenton estas preta, do document.ready, iu funkcio okazos. Esence, kiam estas dokumento preta? Estas kiam mia paĝo estas ŝarĝita. 

Tuj, kiam mia paĝo estas ŝarĝita, la sekvante funkcio estas ĉiam preta. Ĝi diras, se celo de tipo jQButton, aŭ se klaso jQButton estis klakita, ekzekuti ĉi tiu funkcio. Do jen du anonimaj funkcioj, unu difinita ene de la alia. 

Do mia tuta kunteksto tie tiom for estas mia paĝo kiam ŝarĝas nomas tiun funkcion. Kaj ĉi tiu funkcio estas atendanta cxar butonon esti klakis. Kiam butono estas klakita, JQ butono specife klakis, ĝi nomas ĉi aliaj funkcio, kiu iras agordi la fonon koloro de colorDiv esti ajn teksto en inter la etikedoj. 

Tio estas la nocio de kiu butono estis klakita. Sed alie, tiu estas speco de kondutas simila al okazaĵo. Estas nur la sama vojo mi esprimus tion en jQuery. Denove, ĝi estas verŝajne multe pli timiganta. Ĝi ne estas tiel klara kiel io kiel event.js, kiu estas eble iomete pli parolema, sed iomete malpli timiganta. 

Sed se ni pop reen inte al mia retumilo fenestro, se mi komencas clicking-- bone, kiu ŝanĝis al purpuro. Tiu estas verda uzante la ĉenon metodo. Jen oranĝo uzante la eventa traktilo. 

Tiu estas ruĝa uzante jQuery, dekstra? Ili ĉiuj konduti ĝuste la sama. Ili simple fari ĝin uzante malsamajn alproksimiĝas solvi la problemon. Estas multe pli al jQuery tiam ni certe tuj parolos pri en tiu video. Sed se vi volas lerni pli, vi povas iri al la jQuery ia dokumentado kaj lerni tre iom pli pri ĉi tre fleksebla bibliotekon, kiu estas granda por faranta kliento flanko scripting kiaj kion ni faris manipuli la rigardon kaj senti de nia retpaĝo kun la Document Object Model. Mi Doug Lloyd. Jen CS50.