Дъг LLOYD: В това видео, което искахме да извика отделно внимание в много специално елемент на JavaScript че може да се намери удобен когато сте се започне да работи по манипулиране на уеб страници и промяна на съдържанието на вашата уеб страница в движение. И това е идеята за Документ Object Model. Така че, както видяхме в нашия видео на JavaScript, обекти са много гъвкави. И те могат да съдържат различни области. И въпреки че ние не отидем в много детайл, тези полета или свойства, че ние ще би и повече по подходящ начин да ги наречем в контекста на даден обект, дори тези свойства могат да бъдат други предмети. И вътре в тези обекти, може да бъде други обекти. 

Можете да получите този много голям обект с много други обекти вътре в него, които някак създава тази идея на голямо дърво. Сега, предмет на документ представлява много специален обект в JavaScript която организира цялата си уеб страница по този вид на чадър на даден обект. И така, в рамките на документа обект са обекти, представляващи главата и тялото на вашата уеб страница. 

Inside от тях са други обекти и така нататък, и така нататък, докато цялата си уеб страница има била организирана в този голям обект. Какво е нагоре тук, нали? Е, ние знаем как да работим с обекти в JavaScript. 

Така че, ако имаме един обект, който се отнася за цялата ни уеб страница, че означава, като се обадите на правилното методи за манипулиране на този обект или промяна на някои на неговите свойства, ние можете да промените елементите на нашата страница програмно използвайки JavaScript вместо да се налага да код неща с, да речем, HTML. Така че тук е един пример за много проста уеб страница, нали? Тя има HTML тагове, с глава. 

Inside от там е титла, здравей свят. Тогава имам тяло. Вътре на това, имам три различни неща. Имам един таг h2 с глава, една точка, както и връзка. Това е много проста уеб страница. 

Е, какво биха могли документа възражение за това изглежда като? Е, това е малко по- страшно може би на първо време. Но това е наистина само голямо дърво. И в самия корен на това е документ. 

Вътре на документа е друг обект позовавайки се на HTML на страницата ми. И HTML на страницата ми е всичко това. И тогава вътре в HTML обект, имам главата обект, който се отнася до всичко, което има. 

И вътре има, Имам заглавието обект. И вътре там, аз имам друг възрази, че е просто здравей свят. Бих могъл да тялото ми представено по този начин. 

Вътре в тялото ми, имам h2 обект и на стр обект за точка и един обект за връзка. И така, това цялата йерархия може да бъде представен като голям дърво с много по-малък малко неща, които излизат от него. Сега, разбира се, когато ние сме програмиране, ние не мисля за неща като голямо дърво. Искаме да видим действителното кодови свързани неща. 

И за щастие, ние можем използвате нашите инструменти за разработчици действително да погледнем документ, обект на този уеб сайт. И нека да направим това. Така че аз съм отворил таб на браузъра. 

И аз съм отворил инструменти за разработчици. И в моето видео на JavaScript, I спомене, че конзолата не е само някъде, където отпечатваме информация, тя също е място, където ние да въведете информация. В този контекст, какво Отивам да кажа, е, Бих искал да се върна Обектите на документа, така че може да започне да имат поглед към него. Е, как бих могъл да направя това? Е, ако искам да тя организира наистина добре, Отивам да кажа console.dir, D-I-R. Сега, аз използвам console.log просто печат нещо много просто. Но ако искам да организира този йерархично като един обект, Искам да го подреди на структурна като структурата на директориите. 

Затова искам да console.dir документ. Отивам да се удари Enter. А точно под него сега, и аз ще я увеличите тук, Имам този документ отговор с малко стрелка до него. Сега, когато отворя тази стрелка, там ще бъде много неща. 

Но ние ще се игнорират много от него и просто вид фокус върху най-важната част, така че ние може да започне да се движите този документ. Има много повече, отколкото на DOM Просто майка възли и деца възли. Има много неща, на спомагателни неща. 

Така че аз ще се отвори този нагоре. И има един куп неща, който се появи. Но всичко, което ме интересува е точно тук, дете възли. Да отворим, че до. 

Inside от там виждам нещо познато, HTML. Така че във вътрешността на нашия документ едно ниво надолу, HTML. Отварям, че до. Какво ще очакваме? 

Ако си спомняте от нашата диаграма, какво трябва да се намери вътре в HTML? Какво два възела са под него в дървото? Нека разберем. Ние се отворят HTML. Ние слизат на своите деца възли. 

Поп, които се отварят. Има главата и тялото. И ние можем да отворим главата. Отидете на своите деца възли. Е, има титлата. 

И ние да отида и на така завинаги. Бихме могли да направим това с тялото, както добре. Но има един начин за нас да погледнем Документа организирана като голям обект. И ако погледнем е голям обект, който изглежда много като код, това означава, че можем да започнем да манипулира този голям обект, използвайки код, за да се промени това, което ни уебсайт изглежда и се чувства като. 

Така че това е доста мощен инструмент ние имаме на наше разположение сега. Така, както ние просто видях, на документ самия обект и всички обекти вътре в него имат свойства и методи, просто като всеки друг обект, който ние сме работи с в JavaScript. Но ние можем да използваме тези свойства и използват тези методи, за да подреди на разбивка от големия документ и да получите по-ниски и по-ниски и по-ниски, по-фини и по-фини зърна на детайлност, докато не стигнем до много специфична част от нашата уеб страница, която искаме да променим. 

И когато актуализираме свойства на Документирайте Object или се обадете на тези методи, неща може да се случи на нашата уеб страница. И ние не трябва да правим всеки освежаващо да имат тези промени да влязат в сила. 

И това е много готино способността за има, когато ние работим с код. Така че това, което са някои от тези имоти които са част от документ, обект? Е, може би видял Няколко от тях наистина бързо както сме били профучават през гигантски документа обект ние просто видях в уеб браузъра. 

Но няколко от тези имоти може да бъде неща като вътрешната HTML. И вие може дори да ми припомни използването на този в клипа на JavaScript в самия край, когато аз говорех за събития. Каква беше тази вътрешна HTML? Е, това е точно това, което е между таговете. 

И така вътрешната HTML, например, от заглавието маркер, ако бяхме да тръгва в Например, че преди малко, би било здравей свят. Това беше заглавието на страницата ни. Други имоти включва име на възел, който е името на HTML като елемент от заглавието. ID, който е идентификатор атрибут на HTML елемент. 

Припомнете си, че специално можем да посочим специфичните елементи на нашия HTML с ID атрибут, който обикновено е по-удобен в контекста на CSS, конкретно. Майка възел, който е позоваване на това, което е само нагоре над мен в DOM. И дете възли, което е позоваване на това, което е по-долу ми. И ние видяхме много от които просто гледам сам. Дете възли, това е как стигнахме по-ниски и по-ниски в дървото. 

Качества, това е просто масив на атрибутите на HTML елемент. Така пример за атрибути мощ било, ако имате маркер на изображението, тя обикновено има атрибут източник, може би на височина и ширина атрибут. И така, това просто би било масив на всички атрибути, свързани че с HTML елемент. 

Style е друг, който не представлява СГО стайлинг на даден елемент. И по-нататък в тази видео, ние ще конкретно стил ливъридж да направят няколко на промени в нашия сайт. Така че тези, които са някои имоти. 

И там са и някои методи, които можем да използвате, за да се по-бързо, може би се изолират елементи на обекта на документа. Може би, най-разнообразни от тях е getElementById. Така че мога да кажа нещо подобно, защото не забравяйте, че това е метод на документа Object, document.getElementById. 

И вътре в тези скоби, зададени един HTML елемент с определена ID атрибут, че съм по-рано зададете, и аз ще незабавно отидете надясно към този елемент на цялостната сайта. Така че аз не трябва да може пробия надолу през всеки един слой. Мога само да използвате този метод, за да го намерите, нещо като топлина, търсещ ракети, нали? Той просто отива и намира точно това, което търси. 

GetElementsByTagName е много сходни по дух. Може би това ще откриете всички смели тагове или всички тагове п и ми даде масив от всичко че тогава бих могъл да работя с. appendChild добавя нещо едно ниво надолу в дървото. 

Така че мога да добавя една цяла нова елемент с едно ниво по-ниско. Или мога да се премахне един елемент, който е едно ниво по-ниско, както и ако искам да изтриете нещо от моята уеб страница. Сега, един бърз бележка кодиране и бързо спасяването главоболие бележка, да се надяваме. 

getElementById-- на г е с малки букви. Не мога да ви кажа колко пъти съм употребяван getElementById и капитализирана на г там. Тъй като това е наистина общ. Ако напишете дума ID, това е Обикновено капитал I капитал D. И моя код просто не работи. И не мога да разбера защо. Това е наистина, наистина, наистина Общата бъг, че всеки прави, дори експертите, които имат правил това завинаги. Така че просто да са наясно, getElementById, че г е с малки букви. И да се надяваме, че ще ви спести няколко та най-малко мъка. 

Е, какво значи всичко това да ни кажете? Ние имаме тези методи. Ние имаме тези имоти. Сега, ако започнем от документ, документ. каквото и да, сега можем да стигнем до всеки едно парче на нашата уеб страница че искаме да се използва JavaScript Просто като се обадите на тези на методите и деблокирането на имотите че ние намираме най-различни места. 

Това може да се получи многословен, това document.getElementById, може би има дълго име на етикет, може би ще направя повече разговори по-късно. Нещата могат да получат малко по-многословен. И тъй като програмисти, както сте вероятно вижда в много от тези клипове, не ни харесва многословен неща. 

Бихме искали да бъде в състояние да направи нещата бързо. Така че ние бихме искали по- кратък начин да каже нещо. Така че този вид води до понятие за нещо, наречено JQuery. Сега JQuery не е JavaScript. Това не е част от JavaScript. 

Това е библиотека, която е написана от някои програмисти джава преди около 10 години. И целта му е да се опрости това какво е наречена клиентска страна скриптове, които е основно това, което ние бяхме просто говорим за с DOM манипулации. И така, ако исках да модифицирате Цвят на фона на моята уеб страница, може би специфичен Div. 

Ето, аз съм очевидно става ElementById colorDiv. И аз искам да зададете неговия цвят на фона. Ако аз съм просто се използва чист JavaScript използвайки Document Object Model на, това е много неща, нали? document.getElementById colorDiv.style.backgroundColor = зелено. 

Уф. Това беше много за казване. Това е много да се объркат, също. И така в JQuery, можем да кажем, може би това е малко по-стегнато. Търговията на разстояние от него е е може би малко малко по-загадъчен всички изведнъж, нали? 

Най-малко дългосрочните е малко по- обяснителни за това какво правим. Този знак за долар, скоби, апостроф, хашиш, colorDiv, нали? Какво означава това? Е, това е основно само document.getElementById colorDiv. 

Но това е този вид на стенограмите начин да го направите с помощта на JQuery. Нека просто да погледнем сега по няколко различни начина че може в действителност използвате тази Object Document Модел за манипулиране парчета от моя сайт. По-специално, ние ще да се работи по манипулиране цвета на конкретен Div, colorDiv, в уеб страница. Така че нека да погледнем на това. Всичко е наред. Така че аз съм на една страница. Тя се нарича test.html когато изтеглите това, ако искате да калайджия с това. И аз имам един куп бутони на тази страница. И аз казвам, че отделните функции за цветен фон, лилаво, зелено, оранжево, червено, синьо, една единствена функция за цвета на фона, за боравене със събития за цветен фон и използвайки JQuery. Какво съм аз говоря за когато правя това? Така че сме виждали бутоните. Сега, нека да разгледаме най- някои от сорс кода тук. Ще започнем с test.html. Така отделните функции за фон цвят е това, което сте въвели тук. Позволете ми да превъртите малко. 

И вие ще забележите, че аз са дефинирани тези бутони да се каже, когато този бутон се натисне, извикаме функцията за обръщане лилаво. Когато този бутон е да щракнете по-скоро, извикаме функцията светне зелено, превърне оранжево, се превърне в червено, синьо. Вероятно можете да се досетите, че това може би не е най-добрия дизайн смисъл, нали? 

Би било хубаво, ако можех има един по-общ подход. Ами, първо, ние ще разгледаме в това, което тези пет функции са document.getElementById colorDiv.style.background = лилаво, зелено, оранжево, червено, и синьо, съответно. Така че, не е особено най-добър дизайн. 

На следващия набор от бутони Аз се съм написал единична функция, наречена промяна на цвят, които очевидно приема аргумент стринг. Така че това е малко по-добре. Purple, зелено, оранжево, червено, синя сега е аргумент. Така че аз съм писал по-общ JavaScript функция случай, която би могла да изглежда по следния начин. Аз съм минаваща инча Този цвят промяна функция е Очакваме аргумент нарича цвят. И аз казвам, настройте Цвят на фона на цвят. Така че тук представлява това, което аз имам тук. Така че това е малко по-добре. 

Но може би ще успея да направи по-добре от това. Ако слизаме да погледнем в ситуация на боравене със събития, Сега всички тези разговори изглеждат по същия начин. Ако си спомняте за нашата дискусия за товарачи събития, Мога да получа информация за това кои от тези бутони се кликнали и да използват това. 

И така в event.JavaScript, аз съм писмено променят цвета си събитие, което разбере кой бутон се натисне. Това е спусък обект линия. И след това тук, става наистина многословен. Но това, което правя е, че съм създаване на заден план Цвят на triggerObject inner.HTML. Това е текстът в между таговете на бутоните. 

И тогава аз очевидно има да го зададете в малки. И това е, как мога да конвертирате цяла низ в малки в JavaScript, използвайки този метод в малки. Защото, когато задам цвят, както аз се опитвам да направя тук, цветът трябва да бъде всичко с малки букви. 

Но върху бутона, който имах, ако вземем още един поглед, забележите, че текста е налице написана с главна P за лилаво. И тогава в самото дъното тук, аз очевидно опитам да направя това, като използвате JQuery, както добре. И в този случай, не съм всъщност наричайки функция на всички. Току-що каза на класа, че аз съм с помощта на този бутон е бутон JQ. Това е. 

И така, как JQuery знам какво правя? Е, това е едно от предимствата Слаш недостатъци на JQuery. Тя може да ми позволи да направя неща, много стегнато, но може би не като интуитивно. Може би тези, другите три се направи малко повече смисъл това, което правя. Тук, обаче, какво се случва? 

Очевидно, създавайки анонимна функция че всеки път, когато ми товар документ е готов, така document.ready, някои функции ще се случи. По принцип, когато е документ, готови ли сте? Това е, когато ми страница е зареден. 

Така че веднага след като ми се зареди страницата, на следната функция е винаги готов. Той казва, че, ако един обект от тип jQButton, или ако клас jQButton е кликнал, изпълнява тази функция. Така че тук е два анонимни функции, една определена вътре в другия. 

Така че цялото ми контекст Тук доколкото ми е страница когато тя зарежда го нарича тази функция. И тази функция е в очакване за един бутон да се натисне. И когато един бутон се натисне, JQ Бутон изрично е щракване, той нарича тази друга функция, която ще за да настроите фона Цвят на colorDiv да бъде каквото и да е текст между таговете. 

Това е идеята за кой бутон се натисне. Но в противен случай, това е нещо като държи подобно на дадено събитие. Това е просто по същия начин I ще изрази тази в JQuery. Отново, това е може би по- много по-смущаваща. Това не е толкова ясно, колкото нещо като event.js, което е може би малко по- многословен, но малко по-малко смущаваща. 

Но ако се появи обратно към браузъра си прозорец, ако започна clicking-- добре, който промени до лилаво. Това е зелена, използвайки метода на низ. Това е оранжево, използвайки манипулатор събитие. 

Това е червен, използвайки JQuery, нали? Всички те се държат точно същото. Те просто правят това чрез използване на различни подходи за решаване на проблема. Има много повече, за да Jquery тогава ние сме със сигурност Ще говорим за в това видео. Но ако искате да научите повече, можете да отидете на JQuery вид документация и да научат доста малко повече за това много гъвкав библиотека, която е чудесно за това от страна на клиента включили като това, което правехме за манипулиране на външния вид и се чувстват на нашата уеб страница с Document Object Model на. Аз съм Дъг Лойд. Това е CS50.