Pochopenie objektu objektového dokumentu (DOM) v podrobnostiach

Všetci sme počuli o tom DOM, alebo Objektový model dokumentu, ktoré sa z času na čas spomínajú, súvisiace s jazykom JavaScript. DOM je veľmi dôležitý koncept vývoja webových aplikácií. Bez nej by to nebolo možné dynamicky upravovať stránky HTML v prehliadači.

Učenie a pochopenie výsledkov DOM prinesie lepšie spôsoby prístupu, zmeny a monitorovania rôznych prvkov stránky HTML. Objektový model dokumentu nám môže pomôcť znížiť zbytočné zvýšenie času vykonávania skriptu.

Štruktúra stromov údajov

Predtým, ako sa rozprávam o tom, čo DOM je, ako vzniká, ako to existuje, a čo sa v ňom stane, chcem, aby ste vedeli o stromoch. Nie je to ihličnatý a listnatý druh, ale o strom štruktúry údajov.

Je to oveľa jednoduchšie pochopiť koncepciu dátových štruktúr, ak zjednodušíme ich definíciu. Dalo by sa povedať, že štruktúra údajov je asi usporiadanie vašich údajov. Áno, jednoducho staré usporiadanie, ako by ste zariadili nábytok vo vašom dome alebo knihy v knižnici alebo všetky rôzne skupiny potravín, ktoré máte na jedlo na tanieri, aby ste urobte to zmysluplné pre vás.

Samozrejme, to nie je všetko pre dátovú štruktúru, ale to je skoro všetko, kde to všetko začína. toto “usporiadanie” je v srdci všetkého. Je to veľmi dôležité aj v DOM. Ale ešte nehovoríme o DOM, a preto vás nechám ísť smerom k a štruktúru údajov, ktorú by ste mohli poznať: pole.

Polia a stromy

Polia majú indexy a dĺžka, môžu byť multi-dimenzionální, a majú oveľa viac vlastností. Rovnako dôležitejšie je poznať tieto veci o politických súboroch, nemôžme sa s tým obťažovať práve teraz. Pre nás je pole veľmi jednoduché. Keď ste vy usporiadať rôzne veci v riadku.

Podobne, keď premýšľame o stromoch, povedzme, je to asi pričom veci pod sebou, počínajúc iba jednou vecou na vrchole.

Teraz môžete vziať jednokrídlové kačice predtým, otočte ho vzpriamene, a povedz mi to “teraz, každá kačica je pod inou kačicou”. Je to potom strom? to je.

V závislosti od toho, aké sú vaše dáta alebo ako ich budete používať, najvyššie dáta vo vašom strome (nazývané koreň) môže byť niečo, čo je veľmi dôležité alebo niečo, čo je len tam pripojiť ďalšie prvky pod ním.

Či tak alebo onak, najvrchnejší prvok stromovej dátovej štruktúry robí niečo veľmi dôležité. Poskytuje miesto pre začnite hľadať akékoľvek informácie, ktoré chceme získať zo stromu.

Význam DOM

DOM znamená Objektový model dokumentu. Dokument poukazuje na dokument HTML (XML) ktorý je reprezentovaný ako objekt. (V JavaScript môže byť niekedy iba objekt reprezentovaný!)

Model je vytvorené prehliadačom ktorý má HTML dokument a vytvorí objekt, ktorý ho reprezentuje. Tento objekt môžeme získať pomocou jazyka JavaScript. A keďže tento objekt používame na manipuláciu s dokumentom HTML a na vytváranie vlastných aplikácií, DOM je v podstate jeden API.

DOM strom

V kóde JavaScript je HTML dokument reprezentované ako objekt. Všetky údaje prečítané z tohto dokumentu sú tiež uložené ako objekty, vnorené pod sebou (pretože, ako som povedal predtým, v Javine môže byť všetko iba reprezentované ako objekty).

Takže toto je v podstate fyzické usporiadanie údajov DOM v kóde: všetko je usporiadané ako objekty. Logicky však, je to strom.

Analyzátor DOM

Každý softvér prehliadača má program nazvaný DOM Parser za to zodpovedá analyzovať HTML dokument do DOM.

Prehliadače čítajú HTML stránku a premenia jej do objektov, ktoré tvoria DOM. Informácie obsiahnuté v týchto objektoch DOM JavaScript sú logicky usporiadané ako strom štruktúry údajov známy ako strom DOM.

Analýza údajov z HTML do stromu DOM

Vytvorte jednoduchý súbor HTML. Má to koreňový prvok . jeho čiastkové elementy sú a , každý z nich má mnoho vlastných detských prvkov.

Takže v podstate, prehliadač číta údaje v dokumente HTML, niečo podobné:

a, zorganizuje ich do stromu DOM ako toto:

Zobrazenie každého prvku HTML (a jeho príslušného obsahu) v stromu DOM je známe ako a uzol. koreňový uzol je uzol .

Rozhranie DOM v jazyku JavaScript dokument (pretože je to reprezentácia dokumentu HTML). Prístup k stromu DOM dokumentu HTML cez dokument rozhranie v jazyku JavaScript.

Nemôžeme mať len prístup, ale aj manipulujte s dokumentom HTML cez DOM. Na webové stránky môžeme pridávať prvky, odstraňovať ich a aktualizovať ich. Zakaždým, keď zmeníme alebo aktualizujeme akékoľvek uzly v stromu DOM, je to odráža na webovej stránke.

Ako sú navrhnuté uzly

Už som spomenul, že každý údaj z dokumentu HTML je uložené ako objekt v jazyku JavaScript. Takže ako môžu byť dáta uložené ako objekt logicky usporiadané ako strom?

Uzly stromu DOM majú určité vlastnosti alebo vlastnosti. Takmer každý uzol v strome má nadradený uzol (uzol hneď nad ním), detské uzly (uzly pod ním) a súrodenci (ostatné uzly patriace k rovnakému rodičovi). Po tom rodina nad, pod, a okolo uzla je to, čo sa kvalifikuje ako a časť stromu.

Táto rodinná informácia každého uzla je uložené ako vlastnosti v objekte reprezentujúcom tento uzol. Napríklad, deti je vlastnosť uzla, ktorý nesie zoznam podradených prvkov tohto uzla, a tak logicky usporiada jeho podradené elementy pod uzlom.

Vyhnite sa preťaženiu manipulácie DOM

Rovnako ako môžeme považovať aktualizáciu DOMu za užitočnú (s cieľom upraviť webovú stránku), existuje taká vec prekonať to.

Povedzte, že chcete aktualizovať farbu a