„ДОМ“ је термин који се много користи у фронт-енд веб дизајну и развоју. То је скраћеница од „Модел објекта документа“ и представља основни део веб локација.
Колико год је ДОМ важан, многи га људи не разумеју. Заправо, можете програмирати веб странице годинама, а да о томе не научите много. Али како напредна технологија напредује, разумевање ДОМ-а постаје све важније.
Разумевање ДОМ уговора
У објектно оријентисаном програмирању постоји конструкција која се назива интерфејс. Интерфејс не ради ништа сам. Уместо тога, ствара уговор. Каже да било шта може да комуницира са било чим другим, све док се придржава правила уговора о интерфејсу.
Поседовање интерфејса омогућава било ком делу програма да контролише и предвидљиво комуницира са било којим другим делом програма. Интерфејс такође омогућава да један део програма ради са било којим другим делом, чак и ако не зна ништа о делу програма на другој страни интерфејса.
Интерфејс је попут електричне утичнице у вашем зиду. Уређај не мора знати одакле долази напајање све док је напон исправан. Трансформатор на углу не треба да зна шта напаја. Само треба да пошаље електричну енергију под одговарајућим напоном у вашу кућу.
ДОМ је слој интерфејса између веб странице и кода који је креира и мења. Када посетите веб локацију, видећете како прегледач приказује ДОМ те веб локације. Када пишете ХТМЛ, заправо програмирате користећи ДОМ-ов АПИ (програмски интерфејс).
ДОМ стандард одржава организација тзв конзорцијум за Ворлд Виде Веб, или В3Ц. Они су створили високо детаљна документација која дефинише ДОМ стандард.
У овом тренутку можда мислите да не раде баш најбоље посао. На крају, толико је проблема узрокованих проблемима компатибилности међу прегледачима.
Проблем није у стандарду. То је са самим прегледачима. Многи прегледачи су додали функционалност својој ДОМ имплементацији која није у складу са В3Ц стандардима. Понекад та функционалност постане популарна и имплементира се у ДОМ стандард, присиљавајући друге прегледаче да је сустигну.
Још један проблем је што неки људи и даље користе старије верзије прегледача који немају уграђени најновији ДОМ стандард. А понекад прегледачи не примењују стандард правилно.
Како је ДОМ структуриран
О ДОМ-у можете размишљати као о дрвету. Тхе елемент је дебло, а сви елементи унутар њега су гране. Када угнездиш ХТМЛ елементе у родитељски елемент, заправо креираш гране од те гране. Исправан израз за сваку грану је „чвор“.
Структура стабла ствара логичке односе између чворова, попут породичног стабла. Сваки чвор може имати родитеља и претке од којих се грана. Могу имати браћу и сестре. А чворови могу имати децу и потомке. Размишљање на овај начин много помаже када се користе ЈаваСцрипт и ЦСС за интеракцију са ДОМ-ом.
Како ХТМЛ комуницира са ДОМ-ом
ДОМ се дефинише стварањем објекта документа са интерфејсом документа. ХТМЛ код је најдиректнији начин за стварање документа. ХТМЛ вам даје једноставан начин да дефинишете документ без потребе за традиционалним програмирањем.
Ако тек започињете са ХТМЛ-ом, ево пет савета за упознавање са њим.
ХТМЛ је окосница сваке веб странице. Ако сте почетник, пропустит ћемо вас кроз основне кораке за разумевање ХТМЛ-а.
ХТМЛ је једноставнији и једноставнији од традиционалних програмских језика. Олакшава интеракцију са ДОМ-ом за почетнике веб дизајнере.
Како ЦСС комуницира са ДОМ-ом
Једном када ваш ХТМЛ структурира ДОМ документ, ЦСС га може обликовати. Да би то урадио, мора бити у стању да пронађе елементе које желиш да стилизујеш. То чини на неколико начина.
Чворовима докумената можете приступити позивањем елемената по имену, на пример и. ЦСС такође може директно приступити елементима референцирањем класа и ид имена. Стајлинг класе примењује се на неколико елемената, тако да их можете истовремено све стилизовати. Супротно томе, ид стил примењује промене само на један елемент.
Такође можете приступити структури породичног стабла помоћу ЦСС-а и фино подесити приступ за већу контролу. ЦСС бирачи вам омогућавају да одаберете више елемената и даје вам врећу трикова за њихово проналажење. Можете да тражите децу према њиховим прецима, комбинацијама одељења и још много тога.
Како ЈаваСцрипт комуницира са ДОМ-ом
ЈаваСцрипт има највише контроле над документом, јер је ЈаваСцрипт стварни програмски језик са објектима, контролом протока, променљивим итд. ДОМ пружа неколико интерфејса који омогућавају ЈаваСцрипт-у могућност манипулације документом, елементима и другим чворовима.
Повезан: Шта је ЈаваСцрипт?
ЈаваСцрипт може додати и уклонити чворове, као и променити њихов стил. А ЈаваСцрипт може да прати догађаје у документу, попут преласка мишем преко елемента, клика и притиска тастера.
ЈаваСцрипт може претраживати и кретати се кроз стабло докумената на врло сличан начин као и ЦСС. Може да пронађе елементе према ид-у и класи. И може да преузме листе подређених елемената као низове.
Будућност веб развоја и ДОМ
Интернет се много променио од раних дана. У раним данима ЈаваСцрипт се углавном користио за специјалне ефекте и једноставне приказе података. Већина веб локација није била много више од дигиталних брошура. АЈАКС је све то ипак променио.
АЈАКС омогућава веб локацијама да ажурирају податке приказане са сервера у лету без поновног учитавања странице. Пре АЈАКС-а, свака промена података могла се видети само када је страница поново учитана или када је корисник прешао на другу страницу.
Након АЈАКС-а, веб апликације су постајале све популарније. Интернет више није скуп једноставних статичних веб локација и неколико апликација високе функционалности, попут еБаи-а. Интернет је сада готово други оперативни систем, препун високо функционалних апликација.
Како очекивања корисника расту, технологија мора ићи у корак. ЈаваСцрипт није најснажнији или најбржи језик. Такође пати од неколико проблема попут грешака у бројевима са помичним зарезом због којих је мање пожељно за програмере. Овде долази ВебАссембли.
ВебАссембли доноси многе предности матичног кода у прегледач, укључујући побољшану брзину и бољи приступ хардверу. Омогућиће програмерима да користе друге језике за изградњу веб локација попут Ц ++ и Руст.
Али чак и уз огромна побољшања која ће донети ВебАссембли, ДОМ ће и даље бити тамо, пружајући доследан интерфејс између кода и онога што се приказује у прегледачу.
Смањите напрезање очију и продужите век трајања батерије пребацивањем Мицрософт Оутлоок-а у тамни режим.
- Програмирање
- ХТМЛ
- ЦСС
- Модел објекта документа
Ли је номад са пуно радног времена и полимат са много страсти и интереса. Неке од тих страсти врте се око продуктивности, личног развоја и писања.
Претплатите се на наш билтен
Придружите се нашем билтену за техничке савете, прегледе, бесплатне е-књиге и ексклузивне понуде!
Још један корак…!
Молимо потврдите своју адресу е-поште у е-поруци коју смо вам управо послали.
