[Powered by Google Translate] [ДОМ]
[Томми МацВиллиамс] [Универзитет Харвард]
[Ово је ЦС50.] [ЦС50.ТВ]
У овом видеу ћемо да погледамо ДОМ.
Када прегледач преузима веб странице, потребно је да буду заступљени у меморији некако.
Доцумент Објецт Модел, или ДОМ,
описује како је претраживач представља страну у меморији.
У овом видеу, ми ћемо да погледамо у ДОМ-у контексту ЈаваСцрипт,
ДОМ али је језик независан концепт.
На пример, ПХП има своју примену и ДОМ.
Међутим, Дом се често користи од стране ЈаваСцрипт
јер ЈаваСкрипт нам омогућава да промените садржај веб странице у лету,
ДОМ и омогућава нам да приступе деловима веб странице.
Хајде да погледамо један пример веб странице.
Ок, сад да видимо како ће ова страница бити представљени у Дому.
И свако дрво мора да има роот чвор на врху.
У овом документу, ХТМЛ елемент је корен чвор
јер је то први елемент који се појављује.
Хајде да додамо чвор роот нашем дрво.
Хајде да поново погледамо ХТМЛ документа.
Обратите пажњу да је тело ознака је угнеждена унутар ХТМЛ ознаке.
То значи да је тело елемент је дете ХТМЛ елемента.
Ми то може да представља у нашој ДОМ стабло тело за доношење лист
силазно из ХТМЛ.
Хајде да то урадимо.
Имамо тело испод ХТМЛ.
Сада можемо видети да тело има 2 деце своје,
Х1 елемент и елемент Ул.
То значи да можемо повезати оба та елемента
на боди елемента, па хајде да то уради.
Имамо х1 и Ул.
Коначно, ул 'елемент има 3 више деце,
и то ће завршити наш ДОМ стабло, па хајде да додају ли, ли, ли.
Ово употпуњује нашу ДОМ стаблу, а то је начин на који прегледач је чување своју веб страницу.
Хајде сада да погледамо како можемо прећи ово дрво помоћу ЈаваСцрипт.
Можемо приступити ово дрво користећи специјалну ЈаваСцрипт променљиву зове документ.
Један имовина тог документа објекта
је тело имовина, а овај објекат представља
тело елемент у нашем примеру сајту.
Ако бисмо хтели да се сва деца из тела елемента,
који ако се сећате да је Х1 ознака и ознака Ул,
можемо рећи доцумент.боди.цхилдНодес.
И то ће нам вратити низ који садржи обе х1 елемент
и ул 'елемент, јер су они и директни деца тела.
Ако је желео да створи променљиву која представља ул елемент
можемо рећи врр ул = онда то код овде,
и сада зато цхилдНодес је само скуп
можемо индекс у њу са [1] да се други елемент тог низа.
Са овом новом објекту ул можемо приступити различитим својства елемента попут његовог ИД.
Ако кажемо ул.ид да ће бити једнака стринг листу
јер то је оно што ми имамо у нашем ХТМЛ страницу.
Такође, можете добити своју тагНаме, који у овом случају ће бити
Који тип елемента је, у овом случају, ул.
Такође можемо добити свој родитељ или чвора изнад њега, који у овом случају
ће бити тело елемент.
Ако кажемо парентНоде, који ће бити исти као доцумент.боди..
Наравно, ова ул има деце своје,
тако да и даље можемо рећи цхилдНодес на овом елементу.,
Овај низ и сада би требало да има дужину 3 јер постоје 3 комада у нашој листи.
Коначно, можда најкориснији имовина ће бити иннерХТМЛ,.
и то ће бити стварни садржај листе, која у нашем примеру странице
су ти 3 Ли ознаке.
Наравно, ако имамо велики документ, приступ елементима
на овај начин ће бити веома тежак, јер
на крају ћемо морати да говориш такве ствари доцумент.боди.цхилдНодес
носач нешто. цхилдНодес носач нешто друго,
и то ће се заиста гломазан.
Уместо тога, оно што заиста желимо да урадимо је бити у могућности да тражите документ,
Тако да као и тражили смо ствари на интернету помоћу кључних речи
ми стварно треба неки начин тражи да се овај документ језгровито
врати само елементи нам је стало, без попречно
целог стабла од врха до дна.
Срећом, модерни претраживачи омогућавају нам да се то уради
са посебном функцијом зове куериСелецторАлл,
и ова функција узима један аргумент
да је ЦСС селектор, а то ће нам се вратити
све елементе који одговарају тај бирач.
То значи да не морате да научите потпуно нови синтаксу за упит ДОМ.
Уместо тога можете да примените знање већ знате
о ЦСС селектора.
Хајде да погледамо неке примере упита документ.
Ако кажемо куериСелецторАлл и проследите овај стринг # фоо
који ће нам вратити елемент са ИД ФОО.
Такође можете рећи доцумент.гетЕлементБиИд
и њега прође ниске ФОО без тог хасхтаг.
Идеш да се врати исту тачан објекат.
Ако уместо тога прођемо ниску. Бара до доцумент.куериСелецторАлл
ћемо да се вратимо све елементе са класе траци.
Такође можете комбиновати ЦСС селектора.
Ако прође у стринг # фоо имг
који ће нас вратити све слике елемената
да су деца елемент са ИД ФОО.
Као што можете да видите, комбиновањем селектора имамо неке веома моћне могућности претраге.
Али, испод хаубе, ДОМ је заиста само дрво,
и ови селектори омогућавају нам да апстрактна далеко да у извесној мери
јер ми не увек брига за целу структуру ДОМ стабла.
То је био кратак преглед ДОМ, и хвала што сте нам се придружили.
[ЦС50.ТВ]