DOUG LLOYD: Sa video na ito, gusto naming upang tawagan ang hiwalay na pansin sa isang napaka-partikular na elemento ng JavaScript na maaring mahanap madaling gamitin kapag kayo ay nagsisimula upang gumana sa pagmamanipula ng mga web page at ang pagpapalit ng mga nilalaman ng iyong web page sa mabilisang. At iyan ang paniwala ng ang Document Object Model. Kaya tulad ng nakita natin sa ating mga video sa JavaScript, mga bagay ay lubos na kakayahang umangkop. At maaari nilang naglalaman ng iba't ibang larangan. At kahit na hindi namin ginawa pumunta sa isang pulutong ng mga detalye, mga patlang o ari-arian, na gagawin namin malamang na mas naaangkop na tawag sa kanila sa konteksto ng isang bagay, kahit na mga pag-aari ay maaaring iba pang mga bagay. At sa loob ng mga bagay ay maaaring maging iba pang mga bagay. 

Mayroon kang ito napaka malaking bagay na may maraming mga iba pang mga bagay loob ng mga ito, na kung saan ang uri ng mga lumilikha ng mga ideya na ito ng isang malaking puno. Ngayon, ang mga dokumento na object ay isang napaka-espesyal na bagay sa JavaScript na nag-aayos ng iyong buong web pahina sa ilalim ng ganitong uri ng mga payong ng isang bagay. At kaya sa loob ng mga dokumento object ay mga bagay ang pagtatanghal ang ulo at katawan ng iyong web page. 

Inside ng mga iyon ay iba pang mga mga bagay, at iba pa, at iba pa, hanggang ito ay ang iyong buong pahina ng web ay organisado sa ganitong malaking object. Ano ang nakabaligtad dito, tama? Well, alam namin kung paano gumana may mga bagay sa JavaScript. 

Kaya kung kami ay may isang bagay na ay tumutukoy sa aming buong web page, na ibig sabihin sa pamamagitan ng pagtawag sa tamang pamamaraan upang manipulahin object na o pagbabago ng mga tiyak ng kanyang mga katangian, kami maaaring baguhin ang mga elemento ng ang aming pahina ng programming gamit sa halip ng pagkakaroon ng JavaScript sa code ng mga bagay-bagay sa, sabihin nating, HTML. Kaya narito ang isang halimbawa ng isang napaka-simpleng web page, i-right? Ito ay nakuha ng HTML tags, isang ulo. 

Inside ng may isang pamagat, hello mundo. At mayroon akong isang katawan. Sa loob ng na, mayroon akong tatlong iba't-ibang mga bagay-bagay. Mayroon akong isang h2 header tag, isang talata, at isang link. Ito ay isang napaka-simpleng web page. 

Well, kung ano ang maaaring ang dokumento bagay na ito para sa hitsura? Well, ito ay isang maliit nakakatakot siguro sa unang. Ngunit ito ay talagang lamang ng isang malaking puno. At sa pinakadulo ng ugat ng mga ito ay dokumento. 

Inside ng dokumento ay ang isa pang object nagre-refer sa HTML ng aking page. At ang HTML ng aking pahina ay ang lahat ng ito. At pagkatapos ay sa loob ng HTML object, mayroon akong isang head object, na tumutukoy sa lahat ng bagay doon. 

At sa loob ng doon, Mayroon akong isang pamagat object. At sa loob ng doon, mayroon akong ibang bagay na lang ang hello world. Maaari akong magkaroon ng aking katawan kinakatawan tulad nito. 

Inside ng aking katawan, mayroon akong isang h2 object at isang p object para sa talata at isang isang bagay para sa isang link. At kaya ang buong hierarchy ay kinakatawan bilang isang malaking puno na may maraming mga mas maliit na maliit mga bagay-bagay mula sa mga ito. Ngayon, siyempre, kapag kami ay mga programa, kami hindi nag-iisip ng mga bagay na tulad ng isang malaking puno. Gusto naming makita ang tunay na mga code na kaugnay na mga bagay. 

At sa kabutihang-palad, maaari naming gamitin ang aming mga tool ng developer sa tunay na gumawa ng isang pagtingin sa object dokumento website na ito. At ni gawin na ipaalam. Kaya ko na binuksan up ng isang tab ng browser. 

At iyong binuksan up ako Tool ng Developer. At sa aking video sa JavaScript, ako nabanggit na ang console ay hindi isang lugar na naa lamang kung saan print namin ng impormasyon, ito ay din ng isang lugar kung saan Maaari naming input impormasyon. Sa kontekstong ito, kung ano ang Pupunta ako sa sabihin ay Gusto kong makakuha ng bumalik ang mga bagay na dokumento, kaya ko simulan upang magkaroon ng isang pagtingin sa mga ito. Kaya kung paano ang maaari kong gawin ito? Well, kung gusto kong maisaayos ang mga ito ay tunay mabuti, Pupunta ako sa sabihin console.dir, D-I-R. Ngayon, gagamitin ko console.log sa makatarungan print ang isang bagay na napaka-simple. Ngunit kung gusto ko upang ayusin ito hierarchically tulad ng isang bagay, Gusto ko ito uri ng mga balangkas tulad ng isang direktoryo ng istraktura. 

Kaya gusto kong console.dir dokumento. Pupunta ako sa pindutin ang Enter. At karapatan sa ibaba nito ngayon, at kukunin ko na mag-zoom in dito, Mayroon akong dokumentong ito tugon may isang maliit na arrow sa tabi nito. Ngayon, kapag binuksan ko ang arrow, may pagpunta sa maging isang pulutong ng mga bagay-bagay. 

Ngunit kami ay pagpunta upang huwag pansinin ang isang pulutong ng mga ito at lamang uri ng focus sa pinaka mahalagang bahagi, kaya kami ay maaaring magsimula na mag-navigate sa dokumentong ito. May ng maraming higit pa sa mga DOM sa parent lang nodes at anak nodes. May isang pulutong ng mga mababa stuff. 

Kaya ako pagpunta upang buksan ito up. At mayroong isang buong maraming ng mga bagay-bagay na nagpa-pop up. Ngunit ang lahat ng pag-aalaga ko tungkol sa ay karapatan dito, ang bata nodes. Buksan na up Hayaan. 

Inside ng may nakikita ko isang bagay na pamilyar, HTML. Kaya sa loob ng aming mga dokumento isang level down, HTML. Bukas ko na up. Ano ang mga namin umaasa? 

Kung isipin ang mo mula sa aming mga diagram, kung ano ang dapat namin mahanap sa loob ng HTML? Ano ang dalawang nodes ay ibaba ito sa tree? Alamin natin. Buksan up namin HTML. Bumaba kami sa kanyang anak nodes. 

Pop na bukas. May ulo at katawan. At maaari naming buksan ang ulo. Pumunta sa kanyang anak nodes. Well, may title. 

At kami ay maaaring pumunta sa at sa ganito magpakailanman. Kami ay maaaring gawin ito gamit ang katawan pati na rin. Ngunit may isang paraan para sa amin na tingnan ang mga ang inorganisa bilang isang malaking object dokumento. At kung tayo ay tumingin sa isang malaking bagay na mukhang ng maraming tulad ng code, na nangangahulugan na maaari naming simulan upang manipulahin ang malaking bagay gamit code upang baguhin kung ano ang ating Mukhang website at nararamdaman mo. 

Kaya na ang isang medyo malakas na tool kami ay may sa aming pagtatapon ngayon. Kaya bilang lang namin nakita, ang bagay mismo dokumento at ang lahat ng mga bagay sa loob ng mga ito may mga katangian at mga pamamaraan, lamang tulad ng anumang iba pang mga bagay na hindi namin ay nagtatrabaho sa sa JavaScript. Ngunit maaari naming gamitin ang mga ari-arian at gamitin ang mga pamamaraan upang ayusin ng mag-drill down mula sa malaking mga dokumento at makakuha ng pababa ng pababa at mas mababa, mas pinong at mas pinong haspe ng detalye, hanggang sa kami makapunta sa isang napaka-tukoy na piraso ng aming web page na gusto naming baguhin. 

At kapag nag-update kami ng mga ari-arian ng Document Object o tumawag sa mga pamamaraan, bagay na maaaring mangyari sa aming web page. At hindi namin kailangan na gawin ang anumang mga nakakapreskong upang magkaroon ng mga pagbabago ng bisa. 

At iyon ay isang medyo cool na kakayahan na Mayroon kapag kami ay nagtatrabaho sa mga code. Kaya kung ano ang ilan sa mga pag-aari na bahagi ng isang bagay na dokumento? Well, malamang na nakita mo ang isang pares ng mga ito talagang mabilis bilang namin ay ang pag-zip sa pamamagitan ng higanteng dokumento object lang namin nakita sa web browser. 

Ngunit ang isang pares ng mga pag-aari ito ay maaaring maging mga bagay tulad ng panloob na HTML. At maaari mong kahit na pagpapabalik sa akin gamit na ito sa video JavaScript sa dulo kapag ako ay pakikipag-usap tungkol sa mga kaganapan. Ano ang mga ito sa loob ng HTML? Well, ito lang ang kung ano ang sa pagitan ng mga tag. 

At upang ang mga panloob na HTML, halimbawa, ng pamagat tag, kung kami nag-iingat ay pagpunta sa na halimbawa ng ilang sandali ang nakalipas, Gusto ay kumusta mundo. Iyon ay ang title ng ating page. Iba pang mga katangian isama ang pangalan ng node, kung saan ay ang pangalan ng isang HTML elemento tulad ng mga pamagat. ID, kung saan ay ang ID attribute ng isang elemento ng HTML. 

Alalahanin na maaari namin ang espesyal na ipahiwatig tiyak na mga sangkap ng aming HTML may isang katangian ID, na karaniwang lumapit sa magaling sa konteksto ng CSS, partikular. Parent node, na kung saan ay isang reference sa kung ano ang up lang itaas ko ang DOM. At nodes bata, kung saan ay isang reference sa kung ano ang down sa ibaba ako. At nakita namin ang isang pulutong ng mga na lamang ng pagtingin sa pamamagitan. Nodes ng Bata, na kung paano namin nakuha pababa ng pababa sa puno. 

Katangian, na lang ang isang array ng mga katangian ng mga elemento ng HTML. Kaya ang isang halimbawa ng mga katangian baka maging kung mayroon kang isang imahe na tag, ito ay karaniwang may isang pinagmulan attribute, marahil ng isang taas at lapad attribute. At sa gayon ay magiging lamang ng isang array ng lahat ng mga katangian na kaugnay sa na elemento ng HTML. 

Style ay isa pang isa na ang kinakatawan ng CSS estilo ng isang partikular na elemento. At sa susunod na ito sa video, ipapakita namin partikular style pagkilos upang gumawa ng isang pares ng mga pagbabago sa aming website. Kaya ang mga ay ang ilang mga katangian. 

At mayroon ding ilang mga mga pamamaraan na aming makakaya gamitin upang din na mas mabilis siguro ihiwalay elemento ng Document Object. Siguro, ang pinaka-maraming nalalaman sa mga ito ang pagiging getElementById. Kaya ako maaaring sabihin ng isang bagay tulad ng, dahil tandaan na ito ay isang paraan ng Dokumento Bagay, document.getElementById. 

At sa loob ng mga panaklong, tukuyin isang elemento sa isang partikular ID HTML attribute na ko na dati itakda, at idedetalye ko agad pumunta karapatan sa elemento na ng pangkalahatang website. Kaya hindi ko na kailangang mag-drill siguro down sa pamamagitan ng bawat solong layer. Maaari ko lamang gamitin ang paraan upang mahanap ang mga ito, uri ng tulad ng isang init na naghahanap ng misayl, right? Ito lamang ay pumunta at hahanap eksakto kung ano ang hinahanap mo. 

GetElementsByTagName ay halos kapareho sa espiritu. Marahil ito ay makikita ang lahat ng bold tag o lahat ng mga p tags at magbigay sa akin ng isang array ng lahat ng bagay na maaari kong pagkatapos ay gumagana sa. nagdadagdag appendChild bagay isang level down sa tree. 

Kaya ang maaari kong magdagdag ng isang buong bagong element na mas mababa ng isang level. O maaari ko bang tanggalin ang isang elemento na sa isang antas na mas mababa pati na rin kung gusto ko upang tanggalin ang isang bagay mula sa aking mga web page. Ngayon, ang isang mabilis na coding note at isang mabilis sakit ng ulo sa pag-save ng tala, sana. 

getElementById-- ang d ay lowercase. Hindi ko masasabi sa iyo kung gaano karaming beses na ako ginamit getElementById at capitalized ang d doon. Dahil ito ay tunay pangkaraniwan. Kung isusulat ang salitang ID, ito ay karaniwang capital ko capital D. At ang aking code lamang ay hindi gumagana. At hindi ko malaman kung bakit. Ito ay talagang isang, tunay, tunay karaniwang bug na lahat ng tao ay gumagawa, kahit na eksperto na mayroon ay ginagawa ito sa habang panahon. Kaya lang ay magkaroon ng kamalayan, getElementById, na d ay lowercase. At sana, na sine-save ka ng ilang minuto ng hindi bababa ng matinding lungkot. 

Kaya kung ano ang lahat ng ito sabihin sa amin? Mayroon kaming mga pamamaraan. Mayroon kaming mga properties. Ngayon, kung simulan namin mula dokumento, dokumento. ano man, maaari naming ngayon makapunta sa anumang isang piraso ng aming mga pahina ng web na gusto naming paggamit ng JavaScript sa pamamagitan lamang ng pagtawag sa mga pamamaraan sa at pagdaragdag ng mga ari-arian na nakita namin sa iba't-ibang mga lokasyon. 

Ito ay maaaring makakuha masalita, ito document.getElementByID, baka magkaroon ng isang mahabang pangalan ng tag, siguro mong gawin mas maraming mga tawag sa susunod. Mga bagay na maaaring makakuha ng isang maliit na piraso masalita. At bilang mga programmer, pati na sa iyo marahil makikita sa maraming ng mga video, hindi kami tulad ng labis sa mga salita ng mga bagay. 

Gusto naming upang ma-gumawa ng mga bagay na mabilis. Kaya gusto naming ng isang mas maigsi na paraan upang sabihin ng isang bagay. Kaya ito uri ng mga leads sa kuru-kuro ng isang bagay na tinatawag jQuery. Ngayon jQuery ay hindi JavaScript. Ito ay hindi bahagi ng JavaScript. 

Ito ay isang library na ay isinulat sa pamamagitan ng ilang mga programmer JavaScript tungkol sa 10 taon na ang nakakaraan. At ang kanyang layunin ay upang gawing simple ang kung ano ang tinatawag na side scripting client, na kung saan ay talaga kung ano kami ay lamang pakikipag-usap tungkol sa DOM manipulations. At kaya kung gusto ko na baguhin ang mga kulay ng background ng aking web page, marahil isang tiyak na div. 

Dito, tila ko nakukuha ElementById colorDiv. At gusto ko upang itakda ang kulay ng background nito. Kung tingin lang ako sa paggamit ng purong JavaScript gamit ang Document Object Model, na ang isang pulutong ng mga bagay-bagay, di ba? document.getElementByID colorDiv.style.backgroundColor = green. 

Whew. Iyon ay isang pulutong na sabihin. Ito ay isang pulutong na mag-type, masyadong. At kaya sa jQuery, maaari naming marahil sabihin ito nang kaunti pa concisely. Ang trade off sa pagiging ito ay marahil isang maliit na kaunti pang misteryosong lahat ng isang biglaang, right? 

Hindi bababa sa mahabang ay medyo mas nagpapaliwanag sa kung ano ang ginagawa namin. Ito dollar sign, panaklong, single quote, hash, colorDiv, di ba? Ano ang ibig sabihin nito? Well, na talaga lang document.getElementByID colorDiv. 

Ngunit ito ay ang uri ng mga shorthand paraan ng paggawa nito gamit jQuery. Hayaan lang ang dadalhin ng isang hitsura ngayon sa isang pares ng mga iba't-ibang paraan na maaaring aktwal na ako gamitin ang Document Object Model na manipulahin ng mga piraso ng aking site. Sa partikular, kami ay pagpunta na nagtatrabaho sa pagmamanipula ang kulay ng isang partikular na Div, colorDiv, sa isang web page. Kaya sabihin kumuha ng isang pagtingin sa na. Lahat tama. Kaya ako sa isang pahina. Ito ay tinatawag na test.html kapag nag-download ka ng na ito kung gusto mong manghihinang may ito. At Nakakuha ako ng isang grupo ng mga pindutan sa pahinang ito. At ako sinasabi indibidwal na mga function para sa kulay ng background, lilang, berde, orange, pula, asul, isang single function na para sa kulay ng background, handler ng kaganapan para sa kulay ng background, at paggamit ng jQuery. Ano ako ng pakikipag-usap tungkol sa ako kapag ako ay ginagawa ito? Kaya nakita namin na ang mga pindutan. Ngayon, sabihin kumuha ng isang pagtingin sa ang ilan sa mga source code dito. Sisimulan naming may test.html. Kaya indibidwal na mga function para sa background kulay ay kung ano ang nai-type ko dito. Hayaan akong mag-scroll nang kaunti. 

At mapapansin mo na ako natukoy ang mga button na ito sabihin kapag ang pindutan na ito ay na-click, tawagan ang function i-purple. Kapag ang pindutan na ito ay i-click, sa halip, tawagan ang function maging luntian, i orange, i-pula, i-asul. Maaari mong marahil hulaan na ito ay marahil hindi ang pinakamahusay na disenyo kahulugan, tama? 

Mas maganda kung magagawa ko magkaroon ng isang mas pangkalahatang diskarte. Well, unang makikita naming tingnan sa kung ano ang mga limang mga function ay document.getElementByID colorDiv.style.background = purple, green, orange, red, at asul, ayon sa pagkakabanggit. Kaya, hindi partikular na ang pinakamahusay na disenyo. 

Ang susunod na set ng mga pindutan Ako ay may na ako ng nakasulat na isang solong function na tinatawag na baguhin ang kulay na tila tumatanggap ng isang string bilang argument nito. Kaya ito ay mas mahusay na ang isang maliit na bit. Lila, berde, orange, red, asul ay isang argument na ngayon. Kaya ko na nakasulat sa isang mas pangkalahatang kaso JavaScript function, kung saan ay maaaring tumingin ng isang bagay tulad nito. Ako makapasa in. Ang kulay na ito ang pagbabago function ay umaasa sa isang argument na tinatawag na kulay. At ako sinasabi itakda ang kulay ng background sa kulay. Kaya dito ay kumakatawan sa kung ano ang mayroon ako dito. Kaya na ng kaunti mas mahusay. 

Ngunit maaari ko magagawang upang gawin mas mahusay kaysa sa na. Kung pumunta kami pababa upang tingnan sa sitwasyon handler ng kaganapan, ngayon ang lahat ng mga tawag na tumingin sa parehong. Kung isipin ang mo para sa aming talakayan sa mga humahawak ng kaganapan, Maaari ba akong makakuha ng impormasyon tungkol sa kung alin sa mga buttons na ito ay nag-click at gamitin iyon. 

At kaya sa event.JavaScript, na ako nakasulat na kaganapan sa pagbabago ng kulay, na kung saan mga numero kung saan pindutan ay nag-click. Iyan ang line trigger object. At pagkatapos dito, ito ay makakakuha ng talagang masalita. Ngunit ano ang ginagawa ko ay hindi ako ang pagtatakda ng background kulay sa triggerObject inner.HTML. Iyan ang teksto sa sa pagitan ng mga tag na pindutan. 

At pagkatapos ay ako tila may upang itakda ito sa maliliit na titik. At na kung paano ko-convert ng isang buong string sa lowercase sa JavaScript gamit Ang pamamaraan na sa lowercase. Dahil kapag ako magse-set ng isang kulay, bilang sinusubukan ko na gawin dito, ang kulay ay dapat na ang lahat ng lowercase. 

Ngunit ang button na ako ay, kung kumuha kami ng isa pang anyo, mapapansin na ang teksto ay nasulat ng capital P para sa mga lilang. At pagkatapos ay sa tunay ibaba dito, ako malas subukan at gawin ito gamit jQuery rin. At sa kasong ito, hindi ako talaga pagtawag ng isang function sa lahat. Lamang ko na sinabi sa klase na ako gamit para sa button na ito ay isang button Jq. Ayan yun. 

Kaya kung paano gumagana ang kilala jQuery ano ang ginagawa ko? Well, ito ay isa sa mga pakinabang slash disadvantages ng jQuery. Ito ay magpapahintulot sa akin upang gawin ang mga bagay-bagay napaka concisely, ngunit marahil ay hindi bilang intuitively. Siguro ang mga iba pang mga tatlong gumawa ng isang kaunti pang-unawa kung ano ang ginagawa ko. Dito, bagaman, kung ano ang nangyari? 

Tila, ang paglikha isang hindi nakikilalang function na naglo-load kapag ang aking mga dokumento ay handa na, kaya document.ready, ilang mga function ay pagpunta sa mangyayari. Talaga, kapag ay handa na ang isang dokumento? Ito ay kapag na-load sa aking page. 

Kaya sa lalong madaling aking pahina ay nai-load, ang mga sumusunod na function ay laging handa. Sinasabi nito, kung ang isang bagay ng uri jQButton, o kung klase jQButton ay nag-click, maipatupad ang function na ito. Kaya narito ang dalawang anonymous na function, isa na tinukoy sa loob ng isa. 

Kaya ang aking buong konteksto dito sa ngayon ay ang aking pahina kapag ito ay naglo-load ng mga tawag na ito sa function na ito. At ang function na ito ay naghihintay para sa isang pindutan na i-click. At kapag ang isang pindutan ay nag-click, Jq button na partikular ay na-click, ito tawag na ito sa iba pang mga function, kung saan ay pagpunta upang itakda ang background kulay ng colorDiv na maging kahit anong text ay nasa pagitan ng mga tag. 

Ito ang paniwala ng na pindutan ay nag-click. Ngunit sa kabilang banda, ito ay isang uri ng kumikilos katulad ng isang kaganapan. Ito ay lamang ang parehong paraan na ako ay ipahayag ang mga ito sa jQuery. Muli, ito ay maaring isang maraming higit pang pananakot. Ito ay hindi bilang malinaw na bilang isang bagay tulad ng event.js, na kung saan ay marahil isang maliit na kaunti pang masyadong masalita, ngunit isang maliit na piraso ng mas mababa pananakot. 

Ngunit kung pop-back namin sa sa aking browser window, kung sisimulan ko clicking-- rin, na nagbago na purple. Ito ang green gamit ang paraan string. Ito ang orange gamit ang handler ng kaganapan. 

Ito ang red gamit jQuery, di ba? Lahat sila ay kumilos nang eksakto ang parehong. Sila lamang gawin ito gamit ang iba't ibang pamamaraang sa paglutas ng problema. May isang pulutong ng higit pa sa jQuery pagkatapos kami ay tiyak pagpunta sa makipag-usap tungkol sa video na ito. Ngunit kung gusto mong matuto nang higit pa, maaari mong pumunta sa jQuery uri ng babasahin at matuto ng lubos ng kaunti pa tungkol sa ito lubos na kakayahang umangkop library, kung saan ay mahusay para sa paggawa ng client side scripting tulad ng kung ano ang aming ginagawa upang manipulahin ang hitsura at pakiramdam ng aming mga pahina ng web sa Document Object Model. Ako Doug Lloyd. Ito ay CS50.