A dokumentumobjektum-modell (DOM) megértése a részletekben
Mindannyian hallottuk DOM, vagy Dokumentum objektum modell, ami időről időre megemlíti a JavaScript-et. A DOM egy nagyon fontos koncepció a webfejlesztésben. Enélkül nem tudnánk dinamikusan módosíthatja a HTML oldalakat a böngészőben.
A DOM tanulása és megértése jobb módozatokat eredményez hozzáférés, változás és felügyelet egy HTML oldal különböző elemeit. A dokumentumobjektum-modell is segíthet csökkenti a szkript végrehajtási idejének szükségtelen növekedését.
Adatszerkezeti fák
Mielőtt beszélnénk arról, hogy mi a DOM, hogyan jön létre, hogyan létezik, és mi történik benne, azt akarom, hogy tudd a fákról. Nem a tűlevelű és lombhullató fajta, hanem a adatszerkezet fa.
Sokkal könnyebb megérteni az adatstruktúrák fogalmát, ha egyszerűsítjük a definícióját. Azt mondanám, egy adatszerkezet szól az adatok rendezése. Igen, csak egy régi elrendezés, mivel a házban lévő bútorokat vagy könyvespolcban vagy a különböző élelmiszercsoportokban elhelyezett könyveket rendeznéd a lemezeden, hogy értelmes legyen.
Természetesen ez nem minden, ami egy adatszerkezetre vonatkozik, de ez egészen kezdődik. Ez “elrendezés” az összes lényege. Ez nagyon fontos a DOM-ban is. De még nem beszélünk DOM-ról, úgyhogy engedjék, hogy irányítsak egy irányba adatszerkezet, amelyet ismerhetsz: tömbök.
Gyűjtemények és fák
Arrays van indexek és hossz, lehetnek többdimenziós, és sok más jellemzője van. Amennyire fontos, hogy ezeket a dolgokat tömbökről tudjuk megismerni, most ne zavarjuk magunkat ezzel. Számunkra egy tömb elég egyszerű. Ez az, amikor te különböző dolgokat rendezzen egy sorban.
Hasonlóképpen, amikor fákra gondolunk, mondjuk, ez körülbelül a dolgok egymás alá helyezése, csak egy dologgal kezdve.
Most már előfordulhat, hogy az egysoros kacsákat előzőleg, forgassa felfelé, és mondd el nekem “most minden kacsa egy másik kacsa alatt van”. Ez akkor egy fa? Ez.
Attól függően, hogy mi az adataid, vagy hogyan fogod használni, a legfelső adatok a fában (az úgynevezett gyökér) lehet valami nagy jelentőségű vagy valami, ami csak ott van más elemeket csatoljon alá.
Akárhogy is, a fa adatszerkezet legfelső eleme nagyon fontos. Helyet biztosít kezdje el keresni a fáról kivonni kívánt információkat.
A DOM jelentése
A DOM jelentése Dokumentum objektum modell. A dokumentum egy HTML (XML) dokumentumra mutat ami egy Objektumként ábrázolva. (A JavaScript-ben mindent csak egy tárgyként lehet képviselni!)
A modell a böngésző által létrehozott amely HTML dokumentumot vesz, és létrehoz egy objektumot, amely azt reprezentálja. Ezt az objektumot JavaScript segítségével érhetjük el. És mivel ezt az objektumot használjuk a HTML dokumentum manipulálására és saját alkalmazások létrehozására, A DOM alapvetően egy API.
A DOM fa
A JavaScript-kódban a HTML-dokumentum egy tárgyként ábrázolva. Az ebből a dokumentumból olvasott összes adat objektumokként is mentett, egymásba ágyazva (mert mint korábban mondtam, a JavaScript-ben mindent csak objektumként lehet képviselni).
Tehát ez alapvetően a DOM-kódok fizikai elrendezése kódban: minden objektumokként rendezve. Logikusan azonban, ez egy fa.
A DOM Parser
Minden böngészőprogramnak van egy programja DOM Parser amelyért felelős egy HTML-dokumentum elemzése DOM-ba.
A böngészők egy HTML-oldalt olvasnak, és az adatokat a DOM-t alkotó objektumokká alakítják. Az ezekben a JavaScript DOM objektumokban található információk logikusan egy DOM fának nevezett adatszerkezeti fa formájában vannak elrendezve.
Adatok elemzése HTML-ről a DOM-fára
Vegyünk egy egyszerű HTML fájlt. Megvan a gyökérelem . a al-elemek vannak és , mindegyiknek saját gyermeke van.
Tehát lényegében a böngésző elolvassa a HTML dokumentumban található adatokat, valami hasonló ehhez:
És, rendezi őket egy DOM fára mint ez:
Az egyes HTML-elemek (és a hozzá tartozó tartalom) ábrázolása a DOM-fában a Csomópont. A gyökércsomópont a csomópont .
A DOM interfész a JavaScript-ben hívják dokumentum (mivel ez a HTML-dokumentum ábrázolása). Így elérhetjük a HTML dokumentum DOM fáját keresztül dokumentum felület JavaScript-ben.
Nem csak elérhetjük, hanem azt is manipulálja a HTML dokumentumot a DOM-on keresztül. Elemeket adhatunk hozzá egy weblaphoz, eltávolíthatjuk és frissíthetjük őket. Minden alkalommal, amikor megváltoztatjuk vagy frissítjük a csomópontokat a DOM-fában, azt tükröződik a weboldalon.
A csomópontok tervezése
Korábban már említettem, hogy minden HTML-dokumentum adatai tárolt objektumként a JavaScript-ben. Tehát, hogy az objektumként mentett adatok logikailag elrendezhetők fa formájában?
A DOM fa csomópontjai bizonyos jellemzőkkel vagy tulajdonságokkal rendelkeznek. Szinte minden csomópont egy fa van egy szülő csomópontja (a csomópont jobb felett), gyermekcsomópontok (a csomópontok alatt) és testvérek (az azonos szülőhöz tartozó egyéb csomópontok). Ennek megvan család az alábbiakban, és egy csomópont körül az a egy fa része.
Minden csomópont ez a családi információ a csomópontot reprezentáló objektumként mentették. Például, gyermekek egy olyan csomópont tulajdonsága, amely a csomópont gyermekelemeinek listáját hordozza, így logikusan elrendezi a gyermekelemeket a csomópont alatt.
Kerülje a DOM manipuláció túlzását
Amennyire megtaláljuk a DOM frissítését hasznosnak (a weblap módosítása), létezik olyan dolog, mint túlzásba.
Mondja el, frissíteni szeretné az a színét De mi van, ha akarod távolítson el egy csomópontot egy fáról vagy add hozzá hozzá? Az egész fa lehet, hogy át kell rendezni, a csomópont eltávolítva vagy hozzáadva a fához. Ez költséges munka. A munka elvégzéséhez idő és böngésző erőforrás szükséges. Például, mondjuk, szeretné öt további sort adjon hozzá egy táblázathoz. Minden sorhoz, amikor új csomópontjait hozzák létre, és hozzáadják a DOM-hoz, a a fa minden alkalommal frissül, összesen öt frissítés hozzáadása. Ezt a Ez nem csak akkor történik meg, ha elemeket távolítunk el vagy adunk hozzá, hanem egy elem átméretezése más csomópontokra is hatással lehet, mivel az átméretezett elemnek más elemekre is szüksége lehet állítsa be méretüket. Tehát a többi elem megfelelő csomópontjait frissíteni kell, és a HTML elemeket az új szabályok szerint újra meg kell adni. Hasonlóképpen, ha egy weblap egészének elrendezése is érintett, a weboldal egy része vagy egésze újra megjeleníthető. Ez a folyamat ismert áttördelés. Azért, hogy a túlzott visszafolyás elkerülése győződjön meg róla, hogy nem változtatja túl a DOM-ot. A DOM változásai nem az egyetlen dolog, ami a Reflow-t egy weboldalon okozhatja. A böngészőtől függően más tényezők is hozzájárulhatnak hozzá. A DOM a dolgokat csomagolja vizuálisan ábrázolták egy HTML dokumentumban található összes elemből áll. Fizikailag (mint fizikai, mint bármi digitális), ez egy beágyazott JavaScript objektumok halmaza amelynek tulajdonságai és módszerei megtartják az információt logikusan rendezzük őket egy fára.DocumentFragment felület. Gondolj rá, mint egy doboz, ami lehet tartsd meg az öt sort és hozzá kell adni a fához. Így vannak az öt sor egyetlen adatként és nem egyenként, ami csak egy frissítést eredményez a fában.Csomagolás
