Dokumendi objekti mudeli (DOM) mõistmine

Me kõik oleme sellest kuulnud DOM, või Dokumendi objekti mudel, mis saab aeg-ajalt mainitud JavaScripti kohta. DOM on veebiarenduses üsna oluline mõiste. Ilma selleta ei saaks me seda HTML-lehekülgede muutmine dünaamiliselt brauseris.

DOMi õppimine ja mõistmine toob kaasa paremad viisid juurdepääs, muutmine ja jälgimine HTML-lehekülje erinevad elemendid. Dokumendi objekti mudel võib samuti meid aidata vähendada skripti täitmise aja tarbetut suurenemist.

Andmete struktuuri puud

Enne kui räägime sellest, mida DOM on, kuidas see toimub, kuidas see eksisteerib ja mis juhtub selle sees, ma tahan, et sa teaksid puud. Mitte okaspuidust ja lehtpuidust, vaid sellest andmestruktuuri puu.

Andmestruktuuride mõistet on palju lihtsam mõista, kui me selle määratlust lihtsustame. Ma ütleksin, et tegemist on andmestruktuuriga andmete korraldamine. Jah, lihtsalt vana kokkulepe, kuna te korraldaksite oma maja mööbel või raamatud raamaturiiulil või kõikides erinevate toiduainete gruppides, kus teil on oma söögikohas sööki, et muuta see sinu jaoks mõttekaks.

Loomulikult pole see kõik olemas andmestruktuurile, kuid see on päris palju, kus see kõik algab. See “kokkulepe” on selle keskmes. See on DOM-is üsna oluline. Aga me ei räägi veel DOMist, nii et lubage mul juhtida teid a andmestruktuur, mida te tunnete: massiivid.

Kihid ja puud

Vahendid on indeksid ja pikkus, nad võivad olla mitmemõõtmeline, ja neil on palju rohkem omadusi. Niipalju kui oluline on neid asju massiividest teada saada, siis ärge muretsege seda just praegu. Meie jaoks on massiiv üsna lihtne. See on siis, kui sina korraldada rida erinevaid asju.

Samamoodi, kui mõelda puudele, ütleme, see on umbes asjad üksteise all, alustades ainult ühest asjast.

Nüüd võite võtta ühe rida pardid varem, pöörake seda püsti, ja ütle mulle “nüüd, iga part on teise pardi all”. Kas see on siis puu? see on.

Sõltuvalt sellest, millised on teie andmed või kuidas seda kasutate, on teie puu kõige kõrgemad andmed (nn juur) võib olla midagi, mis on väga oluline või midagi, mis on ainult seal lisada selle alla muud elemendid.

Mõlemal juhul teeb puuandmete struktuuri ülemine element midagi väga olulist. See annab koha alustage otsitava teabe otsimist puust väljavõtmiseks.

DOMi tähendus

DOM tähistab Dokumendi objekti mudel. Dokument osutab HTML (XML) dokumendile mis on esindatud objektina. (JavaScriptis võib kõik olla ainult objektina!)

Mudel on loodud brauser mis võtab HTML-dokumendi ja loob selle esindava objekti. Sellele objektile pääseb juurde JavaScripti abil. Ja kuna me kasutame seda objekti HTML-dokumendi manipuleerimiseks ja omaenda rakenduste loomiseks, DOM on põhimõtteliselt API.

DOM puu

JavaScript-koodis on HTML-dokument esindatud objektina. Kõik sellest dokumendist loetud andmed on salvestatud ka objektidena, üksteise alla asetatud (kuna nagu ma varem ütlesin, võib JavaScript kõiges olla ainult objektidena).

Niisiis, see on põhimõtteliselt DOM andmete füüsiline paigutus koodis: kõik on korraldatud objektidena. Loogiliselt aga, see on puu.

DOM parser

Igal brauseri tarkvaral on programm, mida kutsutakse DOM Parser kes vastutab HTML-dokumendi analüüsimine DOM-i.

Brauserid loevad HTML-lehekülje ja muudavad selle andmed DOM-i moodustavateks objektideks. Nendes JavaScript DOM objektides olev teave on loogiliselt paigutatud DOM puu nime all tuntud andmestruktuuripuudeks.

HTML-i andmete kogumine DOM-i puu

Võtke lihtne HTML-fail. See on juurelement . See on alamelemendid on ja , igaühel neist on palju oma lapse elemente.

Nii sisuliselt brauser loeb HTML-dokumendis olevaid andmeid, midagi sarnast:

Ja, korraldab need DOM puu nagu nii:

Iga HTML-elementi (ja selle sisu sisu) DOM-i puus on tuntud kui a Sõlm. The root sõlme on .

The DOM liides JavaScript on kutsutud dokument (kuna see on HTML-dokumendi esitus). Seega pääseme juurde HTML-dokumendi DOM-puule läbi dokument liides JavaScriptis.

Me ei saa ainult juurdepääsu, vaid ka manipuleerige HTML-dokumendiga läbi DOMi. Me saame veebilehe elemente lisada, neid eemaldada ja uuendada. Iga kord, kui me muudame või uuendame DOMi puus asuvaid sõlme, siis kajastab veebilehte.

Kuidas sõlmed on loodud

Olen juba maininud, et kõik HTML-dokumendi andmed on salvestatud JavaScripti objektina. Niisiis, kuidas objektina salvestatud andmeid saab loogiliselt paigutada puusse?

DOMi puu sõlmedel on teatud omadused või omadused. Peaaegu iga puu sõlme on vanem sõlm (sõlme otse selle kohal), lapse sõlmed (sõlmed selle all) ja õed-vennad (teised samale vanemale kuuluvad sõlmed). Võttes seda perekond eespool, allpool ja ümber sõlme on see, mis kvalifitseerib selle kui a osa puust.

See iga sõlme perekonna teave on salvestatud objektina, mis esindab seda sõlme. Näiteks, lapsed on sõlme omadus, mis kannab selle sõlme lapseelementide loendit, seega loogiliselt looma selle lapse elemendid sõlme alla.

Vältige DOM-i manipuleerimise ülerahvastamist

Niipalju kui me leiame DOMi uuendamise kasulikku (veebilehe muutmiseks), on olemas selline asi nagu seda üle.

Ütle, et soovite värvi värskendada

veebisaidil, kasutades JavaScripti. Mida on vaja teha juurdepääsu oma vastava DOM sõlme objektile värskenduse värskendamine. See ei tohiks mõjutada ülejäänud puitu (teised sõlme sõlmed puus).

Aga kui sa tahad eemalda sõlme puust või lisage sellele üks? Kogu puu võib-olla tuleb ümber korraldada, koos sõlme eemaldamisega või puusse lisamisega. See on kulukas töö. Selle töö tegemiseks kulub aega ja brauseri ressurssi.

Näiteks ütleme, et soovite lisage tabelisse viis lisarida. Iga rea jaoks, kui selle uued sõlmed luuakse ja lisatakse DOM-ile, puu uuendatakse iga kord, kokku kuni viis värskendust.

Me saame seda vältida DocumentFragment liides. Mõtle sellele kui võimalikule kastile hoidke kõik viis rida ja lisada puu. Nii on viis rida lisatakse üksikandmetena ja mitte ükshaaval, mis viib puusse ainult ühe värskenduse.

See ei juhtu ainult siis, kui eemaldame või lisame elemente, kuid elemendi suuruse muutmine see võib mõjutada ka teisi sõlme, kuna selle suuruse muutmiseks võib olla vaja muid elemente kohandada nende suurust. Niisiis tuleb kõigi teiste elementide vastavad sõlmed uuendada ja HTML-elemendid muutuvad uuesti vastavalt uutele reeglitele.

Samuti mõjutab see veebilehe kui terviku paigutust, osa või kogu veebileht võib olla muudetud. See on protsess, mida tuntakse kui Reflow. Selleks, et vältida ülemäärast tagasipöördumist veenduge, et DOM ei muutuks liiga palju. DOM-i muudatused ei ole ainus asi, mis võib põhjustada Reflow'i veebisaidil. Sõltuvalt brauserist võivad ka teised tegurid seda aidata.

Pakendamine

Mähkides asju, on DOM visualiseeritud kui puu koosneb kõikidest HTML-dokumendis leiduvatest elementidest. Füüsiliselt (nii füüsiline kui midagi digitaalset saab) on see a sisestatud JavaScript-objektide kogum millest omadused ja meetodid sisaldavad teavet, mis võimaldab loogiliselt paigutada need puu.