[Powered by Google Translate] [ДОМ]
[Томи MacWilliams] [Универзитетот Харвард]
[Ова е CS50.] [CS50.TV]
Во ова видео ние ќе ги разгледаме во ДОМ.
Кога пребарувачот преземања веб страница, таа треба да биде претставен во меморијата некако.
На документ Object Model, или ДОМ,
опишува како интернет пребарувач претставува интернет страница во меморијата.
Во ова видео, ние ќе ги разгледаме во ДОМ во контекст на JavaScript,
но ДОМ е јазик кој е независен концепт.
На пример, PHP има свој ДОМ имплементација, како и.
Сепак, ДОМ често се користат од страна на вклучите Javascript-
бидејќи го вклучите Javascript-ни овозможува да ја смени содржината на веб страница во лет,
и ДОМ ни овозможува пристап до делови од веб страница.
Ајде да ги погледнеме еден пример веб страница.
Океј, сега да видиме колку оваа страница ќе биде претставен во ДОМ.
И секое дрво треба да имате root јазол на врвот.
За овој документ, елементот HTML е коренот јазол
затоа што тоа е првиот елемент кој се појавува.
Ајде да додадете коренот јазол на нашите дрво.
Ајде да ги разгледаме во документот HTML повторно.
Забележите дека телото таг е вгнездена во внатрешноста на HTML таг.
Ова значи дека телото елемент е дете на HTML елемент.
Ние може да претставува ова во нашата DOM-стебло со тоа што телото на лист
слегува од HTML.
Ајде да го направиме тоа.
Имаме тело под HTML.
Сега можеме да видиме дека телото има 2 деца од своите,
Н1 елемент и ул елемент.
Ова значи дека можеме да се поврзете и двете од овие елементи
на телото елемент, па ајде направите тоа.
Имаме H1 и на ул.
Конечно, ул елемент има уште 3 деца,
и ова ќе заврши нашата DOM-стебло, па ајде да додадете Ли, Ли, Ли.
Со ова завршува нашата DOM-стебло, и ова е начинот на кој пребарувач е чување на вашата веб страница.
Сега ајде да ги разгледаме во тоа како ние може да напречни ова дрво користејќи JavaScript.
Ние може да пристапите на оваа дрво со помош на специјален го вклучите Javascript-променлива наречена документ.
Еден имот на овој документ објектот
е телото на имотот, и овој објект претставува
телото елемент во нашиот пример страница.
Ако сакаме да ги добиете сите од децата на телото елемент,
кој ако се запамети е дека H1 таг и ул ознака,
можеме да кажеме document.body.childNodes.
И тоа ќе ни даде назад низа која содржи и Н1 елемент
и ул елемент, бидејќи тие се двете директна деца на телото.
Ако сакавме да се создаде променлива претставуваат ул елемент
можеме да кажеме vrr ул = потоа овој код овде,
и сега, бидејќи childNodes е едноставно низа
ние може да индексира во неа со [1] за да го добиете вториот елемент на таа низа.
Со оваа нова ул објект може да пристапите на различни својства на елементот како нејзината проект.
Ако се каже ul.id тоа ќе биде еднаква на низа листа
затоа што тоа е она што го имаме во нашата HTML страница.
Ние, исто така, може да ја добие својата tagName, кој во овој случај ќе биде
каков тип на елемент што е, во овој случај, ул.
Ние, исто така може да се добие својот родител или јазол над него, кој во овој случај
се случува да биде телото елемент.
Ако се каже. ParentNode, тоа ќе биде иста како document.body.
Се разбира, ова ул има деца на сопствената,
па ние се уште може да се каже. childNodes на овој елемент,
и оваа низа сега треба да имаат должина 3, бидејќи постојат 3 ставки во нашата листа.
Конечно, можеби повеќето корисни имотот е и ќе биде. InnerHTML,
и ова ќе биде вистински содржината на листа, која во нашиот пример страница
беа оние 3 li тагови.
Се разбира, ако имаме голем документ, пристап до елементите
на овој начин ќе биде навистина тежок, бидејќи
на крајот ние ќе мора да кажам нешто како document.body.childNodes
заградата нешто. childNodes заградата нешто друго,
и тоа се случува да добиете навистина незгодни.
Наместо она што навистина сакате да го направите е да се биде во можност да се пребарува на документот,
па исто како и ние пребаруваат за работите на интернет со користење на клучни зборови
ние навистина треба некој начин за пребарување на овој документ посочно
се вратат само елементите ние се грижиме за без traversing
целата дрво врвот до дното.
За среќа, современи прелистувачи ни овозможи да го направите ова
со посебна функција наречена querySelectorAll,
и оваа функција се еден аргумент
дека е CSS селектор, и тоа се случува да се вратат да ни
сите елементи кои одговараат на таа селектор.
Тоа значи дека не треба да учат цел еден нов синтакса за доведување во прашање на ДОМ.
Наместо тоа можете да го применат знаењето што веќе знаете
за CSS селектори.
Ајде да ги погледнеме некои примери на доведување во прашање на документот.
Ако се каже querySelectorAll и го помине овој стринг # foo
тоа ќе ни даде назад на елементот со проект foo.
Можете исто така да се каже document.getElementByID
и тоа го положат низа foo без тоа hashtag.
Ви се случува да се вратам на исто точно објект.
Ако наместо тоа, ние го положат низа. Бар да document.querySelectorAll
ние ќе се вратам сите елементи со класата бар.
Ние, исто така, може да се комбинираат CSS селектори.
Ако ние помине во низа # foo img
што се случува да ни даде вратам сите на сликата елементи
дека сме деца на елементот со проект foo.
Како што можете да видите, со комбинирање на селектори имаме некои навистина моќна пребарување способности.
Но под хауба, на ДОМ е навистина само едно дрво,
и овие селектори ни овозможи да се апстрактни што подалеку до некој степен
бидејќи ние не секогаш се грижи за целата структура на дрвото ДОМ.
Тоа беше брз преглед на ДОМ, и благодарност за што ни се придруживте.
[CS50.TV]