Разумевање објектног модела документа (ДОМ) у детаљима

Сви смо чули за ДОМ, или Модел објекта документа, које се повремено спомињу, а односе се на ЈаваСцрипт. ДОМ је веома важан концепт у веб развоју. Без ње не бисмо могли динамички модификовати ХТМЛ странице у претраживачу.

Учење и разумевање ДОМ-а резултира бољим начинима приступ, промена и надгледање различите елементе ХТМЛ странице. Објектни модел документа такође може да нам помогне смањите непотребно повећање времена извођења скрипте.

Стабла структуре података

Пре него што причамо о томе шта је ДОМ, како настаје, како он постоји, и шта се дешава у њему, желим да знате о дрвећу. Не у црногоричној и листопадној врсти, него у стабло структуре података.

Много је лакше схватити концепт структура података ако поједноставимо његову дефиницију. Рекао бих да се ради о структури података распоређивање података. Да, само обичан стари аранжман, јер бисте уредили намјештај у вашој кући или књиге на полицу за књиге или све различите групе хране које имате за оброк на тањуру како бисте учините то значајним за вас.

Наравно, то није све што постоји у структури података, али то је прилично много гдје се све почиње. Ово “аранжман” је у срцу свега. Веома је важно иу ДОМ-у. Али још увек не говоримо о ДОМ-у, па дозволите да вас усмерим ка а структуру података коју можда познајете: низови.

Низови и дрвеће

Арраис хаве индекси и дужина, они могу бити мулти-димензионални, и имају много више карактеристика. Колико год је важно знати те ствари о низовима, немојмо се сада мучити с тим. За нас, низ је прилично једноставан. То је кад ти организовати различите ствари у линији.

Слично томе, када размишљамо о дрвећу, рецимо, ради се о томе стављајући ствари једна поред друге, почевши са само једном ствари на врху.

Сада можете да узмете патке од једне линије од раније, окрените га усправно, и реци ми то “сада, свака патка је под другом патком”. Да ли је то онда дрво? То је.

У зависности од тога који су ваши подаци или како ћете га користити, највиши подаци у вашем стаблу (називају се корен) може бити нешто што јесте од великог значаја или нешто што је само ту ставите друге елементе испод њега.

У сваком случају, највиши елемент у структури података о стаблу ради нешто веома важно. То обезбеђује место почните тражити било коју информацију коју желите извући из стабла.

Значење ДОМ-а

ДОМ стоји за Модел објекта документа. Документ указује на ХТМЛ (КСМЛ) документ која је представљен као Објект. (У ЈаваСцрипту се све може представити само као објект!)

Модел је креира прегледач која узима ХТМЛ документ и креира објекат који га представља. Можемо приступити овом објекту помоћу ЈаваСцрипт-а. А пошто користимо овај објекат да манипулишемо ХТМЛ документом и направимо сопствене апликације, ДОМ је у основи ан АПИ.

ДОМ стабло

У ЈаваСцрипт коду, ХТМЛ документ је представљен као објекат. Сви подаци који се читају из тог документа су такође се чувају као објекти, угнежени један испод другог (јер као што сам рекао раније, у ЈаваСцрипту се све може икада представити само као објекти).

Дакле, ово је у основи физички распоред ДОМ података у коду: све је уређени као објекти. Логично, међутим, то је дрво.

ДОМ Парсер

Сваки софтвер прегледача има програм који се зове ДОМ Парсер то је одговорно парсирање ХТМЛ документа у ДОМ.

Прегледачи читају ХТМЛ страницу и претварају податке у објекте који чине ДОМ. Информације присутне у овим ЈаваСцрипт ДОМ објектима логички су распоређене као стабло структуре података познато као ДОМ стабло.

Разврставање података из ХТМЛ-а у ДОМ стабло

Узмите једноставан ХТМЛ фајл. Има роот елемент . Његово поделементи су и , свако од њих има много сопствених елемената.

У суштини, претраживач чита податке у ХТМЛ документу, нешто слично овоме:

И, распоређује их у ДОМ стабло овако:

Представљање сваког ХТМЛ елемента (и његовог садржаја) у ДОМ стаблу је познато као а Ноде. Тхе роот ноде је чвориште .

Тхе ДОМ интерфејс у ЈаваСцрипт се зове доцумент (пошто је то приказ ХТМЛ документа). Тако приступамо ДОМ стаблу ХТМЛ документа кроз доцумент интерфејс ин ЈаваСцрипт.

Не можемо само да приступимо, већ такође манипулишете ХТМЛ документом преко ДОМ-а. Можемо додати елементе на веб страницу, уклонити их и ажурирати. Сваки пут када мењамо или ажурирамо било који чвор у ДОМ стаблу, он одражава се на веб страници.

Како су дизајнирани чворови

Већ сам споменуо да је сваки део података из ХТМЛ документа сачуван као објекат у ЈаваСцрипту. Дакле, како се подаци сачувани као објект могу логички уредити као стабло?

Чворови ДОМ стабла имају одређене карактеристике или својства. Скоро сваки чвор на дрвету има родитељски чвор (чвор изнад њега), цхилд нодес (чворови испод њега) и сиблингс (други чворови који припадају истом родитељу). Имајући ово породица изнад, испод и око чвора је оно што га квалификује као део дрвета.

Ове информације о породици сваког чвора су се чувају као својства у објекту који представља тај чвор. На пример, деца је својство чвора који носи списак дечјих елемената тог чвора, чиме логички уређује своје подређене елементе испод чвора.

Избегавајте претерану манипулацију ДОМ-ом

Колико год да је ажурирање ДОМ-а корисно (да би се модификовала веб страница), постоји нешто као претјерати.

Реците, желите ли ажурирати боју а