Skrytý hrdina webových stránok: Pochopenie DOM

„DOM“ je výraz, ktorý sa pri dizajne a vývoji front-end webov často používa. Je to skratka pre „Document Object Model“ a je to nevyhnutná súčasť webových stránok.

Rovnako dôležité ako DOM je, veľa ľudí mu nerozumie. V skutočnosti môžete webové stránky programovať roky, bez toho, aby ste sa o nich veľa dozvedeli. S vývojom front-endovej technológie je pochopenie modelu DOM stále dôležitejšie.

Porozumenie zmluvy DOM

V objektovo orientovanom programovaní existuje konštrukcia nazývaná rozhranie. Rozhranie samo o sebe nič nerobí. Namiesto toho vytvára zmluvu. Hovorí sa v ňom, že čokoľvek môže interagovať s čímkoľvek iným, pokiaľ dodržiava pravidlá zmluvy o rozhraní.

Mať rozhranie umožňuje akejkoľvek časti programu interagovať s ktoroukoľvek inou časťou programu kontrolovaným a predvídateľným spôsobom. Rozhranie tiež umožňuje jednej časti programu pracovať s akoukoľvek inou časťou, aj keď nevie nič o časti programu na druhej strane rozhrania.

Rozhranie je ako elektrická zásuvka vo vašej stene. Vaše zariadenie nemusí vedieť, odkiaľ pochádza energia, pokiaľ je správne napätie. Transformátor na rohu nemusí vedieť, čo napája. Je len potrebné, aby ste do domu poslali elektrinu so správnym napätím.

instagram viewer

DOM je vrstva rozhrania medzi webovou stránkou a kódom, ktorý ju vytvára a mení. Pri návšteve webových stránok vidíte, ako prehliadač vykresľuje DOM daného webu. Keď píšete HTML, programujete vlastne pomocou rozhrania API (programovacie rozhranie) modelu DOM.

Štandard DOM udržuje organizácia s názvom World Wide Web Consortiumalebo W3C. Vytvorili veľmi podrobná dokumentácia definujúca DOM štandard.

V tomto okamihu si možno myslíte, že nerobia veľmi dobrú prácu. Koniec koncov, existuje toľko problémov spôsobených problémami s kompatibilitou viacerých prehľadávačov.

Problém nie je v štandarde. Je to so samotnými prehľadávačmi. Mnoho prehľadávačov pridalo do svojej implementácie DOM funkcie, ktoré nie sú v súlade so štandardmi W3C. Niekedy sa táto funkcia stáva populárnou a implementuje sa do štandardu DOM, čo núti ostatné prehľadávače dohnať vývoj.

Ďalším problémom je, že niektorí ľudia stále používajú staršie verzie prehľadávačov, ktoré nemajú zabudovaný najnovší štandard DOM. Prehliadače niekedy štandardy neimplementujú správne.

Ako je DOM štruktúrovaný

Môžete premýšľať o DOM ako o strome. The prvok je kmeň a všetky prvky v ňom sú vetvy. Keď vnoríte prvky HTML do nadradeného prvku, vytvoríte vlastne vetvy mimo tejto vetvy. Správny výraz pre každú vetvu je „uzol“.

Stromová štruktúra vytvára logické vzťahy medzi uzlami, ako je napríklad rodokmeň. Každý uzol môže mať rodiča a predkov, z ktorých sa vetví. Môžu mať súrodencov. A uzly môžu mať deti a potomkov. Myslenie v týchto termínoch veľmi pomáha pri interakcii s DOM pomocou JavaScriptu a CSS.

Ako HTML interaguje s DOM

DOM je definovaný vytvorením objektu dokumentu s rozhraním dokumentu. Váš HTML kód je najpriamejší spôsob, ako vytvoriť dokument. HTML vám poskytuje jednoduchý spôsob definovania dokumentu bez potreby tradičného programovania.

Ak s HTML ešte len začínate, tu sú tieto päť tipov, ako sa s ním oboznámiť.

5 krokov k pochopeniu základného kódu HTML

HTML je chrbticou každej webovej stránky. Ak ste začiatočník, dovoľte nám, aby sme vás prevedli základnými krokmi k pochopeniu HTML.

HTML je jednoduchšie a zhovievavejšie ako tradičné programovacie jazyky. Pre začínajúcich webdizajnérov je uľahčenie interakcie s DOM.

Ako CSS interaguje s DOM

Keď váš HTML štruktúruje dokument DOM, môže CSS tento dokument upraviť. Aby to bolo možné, musí byť schopný nájsť prvky, ktoré chcete upravovať. Robí to niekoľkými spôsobmi.

K uzlom dokumentu môžete pristupovať odkazom na prvky podľa názvu, napríklad a. CSS môžu tiež pristupovať k prvkom priamo odkazom trieda a id mien. Styling triedy sa aplikuje na niekoľko prvkov, takže ich môžete štýlovať všetky súčasne. Naopak, štýly id aplikujú zmeny iba na jeden prvok.

Môžete tiež získať prístup k štruktúre rodokmeňa pomocou CSS a doladiť prístup pre väčšiu kontrolu. Selektory CSS vám umožňujú výber viacerých prvkov a poskytuje vám balíček trikov na ich nájdenie. Môžete vyhľadávať deti podľa ich predkov, kombinácií tried a oveľa viac.

Ako JavaScript interaguje s DOM

JavaScript má nad dokumentom najväčšiu kontrolu, pretože JavaScript je skutočný programovací jazyk s objektmi, riadením toku, premennými atď. DOM poskytuje niekoľko rozhraní, ktoré umožňujú JavaScriptu schopnosť manipulovať s dokumentom, prvkami a inými uzlami.

Súvisiace: Čo je to JavaScript?

JavaScript môže pridávať a odstraňovať uzly a meniť ich štýl. A JavaScript môže sledovať udalosti v dokumente, ako je napríklad pohyb myši nad prvkom, klikanie a stláčanie klávesov.

JavaScript dokáže vyhľadávať a navigovať v strome dokumentov veľmi podobným spôsobom ako v CSS. Je schopný nájsť prvky podľa id a triedy. A môže načítať zoznamy podradených prvkov ako polia.

Budúcnosť vývoja webu a DOM

Internet sa od počiatku veľmi zmenil. V začiatkoch sa JavaScript väčšinou používal na špeciálne efekty a jednoduché zobrazovanie údajov. Väčšina webových stránok nebola oveľa viac ako digitálne brožúry. AJAX to však všetko zmenil.

AJAX umožňuje webovým serverom aktualizovať údaje zobrazené zo servera za behu bez opätovného načítania stránky. Pred AJAX bolo možné každú zmenu údajov vidieť iba pri opätovnom načítaní stránky alebo po prechode používateľa na inú stránku.

Po AJAX boli webové aplikácie čoraz populárnejšie. Internet už nie je zbierkou jednoduchých statických webov a niekoľkých aplikácií s vysokou funkčnosťou, ako je eBay. Teraz je internet takmer druhým operačným systémom plným vysoko funkčných aplikácií.

S rastom očakávaní používateľov musí technológia držať krok. JavaScript nie je najvýkonnejším alebo najrýchlejším jazykom. Trpí tiež niekoľkými problémami, ako sú chyby s pohyblivou rádovou čiarkou, vďaka ktorým je pre vývojárov menej žiaduci. Tu prichádza na rad WebAssembly.

WebAssembly prináša prehľadávaču mnoho výhod natívneho kódu, vrátane vyššej rýchlosti a lepšieho prístupu k hardvéru. Umožní programátorom používať iné jazyky na vytváranie webových stránok, ako sú C ++ a Rust.

Ale aj napriek obrovským vylepšeniam, ktoré prinesie WebAssembly, DOM tu stále bude a poskytuje konzistentné rozhranie medzi kódom a tým, čo sa zobrazuje v prehliadači.

Ako používať Outlook v tmavom režime

Znížte namáhanie očí a predĺžte výdrž batérie prepnutím aplikácie Microsoft Outlook do tmavého režimu.

O autorovi