Dokumento objekto modelio (DOM) supratimas detalėse

Mes visi girdėjome apie DOM, arba Dokumento objektų modelis, kuri kartais paminėta, susijusi su „JavaScript“. DOM yra gana svarbi interneto kūrimo koncepcija. Be jo negalėtume dinamiškai keisti HTML puslapius naršyklėje.

Mokymasis ir supratimas apie DOM duoda geresnių būdų prieigą, keitimą ir stebėjimą skirtingus HTML puslapio elementus. Dokumentų objekto modelis taip pat gali mums padėti sumažinti nereikalingą scenarijų vykdymo laiko padidėjimą.

Duomenų struktūros medžiai

Prieš kalbėdamas apie tai, kas yra DOM, kaip ji atsiranda, kaip ji egzistuoja, ir kas vyksta viduje, noriu, kad jūs žinotumėte apie medžius. Ne spygliuočių ir lapuočių rūšis, bet apie duomenų struktūros medis.

Jei supaprastiname jos apibrėžimą, daug lengviau suvokti duomenų struktūrų sąvoką. Sakyčiau, apie duomenų struktūrą duomenų tvarkymas. Taip, tiesiog senas susitarimas, nes jūs surengtumėte savo namuose esančius baldus ar knygas knygų lentynoje ar visose skirtingose maisto grupėse, kurios jums reikia, kad galėtumėte maitintis ant plokštelės, kad galėtumėte padaryti jį prasmingą.

Žinoma, tai ne viskas, kas yra duomenų struktūroje, bet tai yra gana daug, kur viskas prasideda. Tai “išdėstymas” yra visų jos širdis. Tai gana svarbu DOM. Bet mes nekalbame apie DOM dar, taigi leiskite man nukreipti jus į a duomenų struktūra, kurią galėtumėte žinoti: masyvai.

Medžiai ir medžiai

Array yra indeksai ir ilgis, jie gali būti daugialypis, ir turi daug daugiau savybių. Kiek svarbu žinoti šiuos dalykus apie masyvus, nesikreipkime į tai dabar. Mums masyvas yra gana paprastas. Tai, kai jūs eilėje sutvarkyti skirtingus dalykus.

Panašiai, galvodami apie medžius, sakykime, tai yra apie vėlesnius dalykus, pradedant tik vienu dalyku viršuje.

Dabar jūs galite paimti iš vienos eilutės ančių, pasukite ją vertikaliai, ir pasakyk man “dabar kiekviena antis yra kitoje anties vietoje”. Ar tai yra medis? tai yra.

Priklausomai nuo to, kokie jūsų duomenys yra arba kaip jūs jį naudosite, viršutiniai duomenys medyje (vadinami „ šaknis) gali būti kažkas, kas yra labai svarbu arba kažkas, kad tik ten pridėti kitus elementus po juo.

Bet kuriuo atveju aukščiausias medžio duomenų struktūros elementas daro kažką labai svarbaus. Ji suteikia vietą pradėti ieškoti informacijos, kurią norime išgauti iš medžio.

DOM reikšmė

DOM reiškia Dokumento objektų modelis. Dokumentas nurodo HTML (XML) dokumentą kuris yra atstovaujamas kaip Objektas. („JavaScript“ sistemoje viskas gali būti tik kaip objektas!)

Modelis yra sukurta naršyklės kuris priima HTML dokumentą ir sukuria jį atspindintį objektą. Šį objektą galime pasiekti naudodami „JavaScript“. Ir kadangi mes naudojame šį objektą manipuliuoti HTML dokumentu ir kurti savo programas, DOM iš esmės yra API.

DOM medis

„JavaScript“ kode yra HTML dokumentas atstovaujamas kaip objektas. Visi duomenys, skaitomi iš šio dokumento, yra taip pat išsaugoti kaip objektai, įdėtos viena kitai (nes, kaip sakiau anksčiau, „JavaScript“ viskas gali būti tik pavaizduota kaip objektai).

Taigi, tai iš esmės yra fizinis DOM duomenų išdėstymas kodu: viskas yra išdėstyti kaip objektai. Tačiau logiška, tai medis.

DOM Parser

Kiekviena naršyklės programinė įranga yra vadinama programa DOM Parser už tai atsakinga HTML dokumento analizė į DOM.

Naršyklės skaito HTML puslapį ir savo duomenis paverčia objektais, sudarančiais DOM. Šiuose „JavaScript“ DOM objektuose esanti informacija logiškai išdėstyta kaip duomenų struktūros medis, žinomas kaip „DOM“ medis.

Išnagrinėti duomenis iš HTML į DOM medį

Paimkite paprastą HTML failą. Ji turi šaknų elementas . Jo sub elementai yra ir , kiekvienas turi daug savo vaikų elementų.

Taigi iš esmės naršyklė skaito HTML dokumento duomenis, kažkas panašaus į tai:

Ir, organizuoja juos į DOM medį kaip šitas:

Kiekvieno HTML elemento (ir jo turinio) vaizdavimas DOM medyje yra žinomas kaip a Mazgas. The šaknų mazgas yra mazgas .

The DOM sąsaja „JavaScript“ yra vadinamas dokumentą (kadangi tai yra HTML dokumento atvaizdas). Taigi, mes pasiekiame HTML dokumento DOM medį pro dokumentą sąsaja „JavaScript“.

Mes negalime tik prieiti, bet taip pat manipuliuoti HTML dokumentu per DOM. Mes galime pridėti elementų į tinklalapį, pašalinti ir atnaujinti. Kiekvieną kartą, kai keičiame ar atnaujiname bet kokius DOM medžio mazgus, tai atspindi tinklalapyje.

Kaip sukurti mazgai

Anksčiau minėjau, kad kiekvienas iš HTML dokumento duomenų yra išsaugotas kaip „JavaScript“ objektas. Taigi, kaip duomenys, išsaugoti kaip objektas, gali būti logiškai išdėstyti kaip medis?

DOM medžio mazgai turi tam tikrų savybių ar savybių. Beveik kiekvienas medžio mazgas turi pagrindinį mazgą (mazgas tiesiai virš jo), vaiko mazgai (mazgai po juo) ir broliai ir seserys (kiti mazgai, priklausantys tam pačiam tėvui). Turėdami tai šeima aukščiau, apačioje ir aplink mazgas yra tai, kas ją apibūdina kaip a medžio dalis.

Ši šeimos informacija apie kiekvieną mazgų yra įrašyti kaip savybės objektui, atstovaujančiam tą mazgą. Pavyzdžiui, vaikai yra mazgo, turinčio šio mazgo vaikų elementų sąrašą, nuosavybė, taigi logiškai išdėstyti savo vaiko elementus po mazgu.

Venkite DOM manipuliavimo

Kiek galime rasti atnaujinimą DOM naudinga (siekiant pakeisti tinklalapį), yra toks dalykas, kaip jį pernelyg.

Pasakykite, kad norite atnaujinti a. Spalvą

tinklalapyje naudojant „JavaScript“. Ką reikia padaryti pasiekti atitinkamą DOM mazgo objektą ir atnaujinkite spalvų savybę. Tai neturėtų paveikti likusios medžio dalies (kiti medžio mazgai).

Bet, ką daryti, jei norite pašalinti medį iš mazgo arba pridėkite vieną prie jo? Visas medis gali tekti pertvarkyti, su mazgu pašalintas arba pridėtas prie medžio. Tai brangus darbas. Tam reikia laiko ir naršyklės išteklių.

Pavyzdžiui, tarkime, kad norite pridėkite penkias papildomas eilutes prie stalo. Kiekvienai eilutei, kai jos nauji mazgai yra sukurti ir įtraukti į DOM, medis atnaujinamas kiekvieną kartą, pridedant iki penkių atnaujinimų.

Tai galima išvengti naudojant „DocumentFragment“ sąsaja. Pagalvokite apie tai kaip dėžutę, kuri galėtų laikykite visas penkias eilutes ir pridėkite prie medžio. Tokiu būdu yra penkios eilutės pridėta kaip vienas duomenų rinkinys ir ne vienas po kito, todėl medyje bus tik vienas atnaujinimas.

Tai įvyksta ne tik tada, kai pašaliname ar pridedame elementų, bet elemento dydžio keitimas taip pat gali paveikti kitus mazgus, nes pakeistam elementui gali prireikti kitų elementų koreguoti jų dydį. Taigi, atitinkamų visų kitų elementų mazgai turės būti atnaujinti ir HTML elementai vėl bus pateikti pagal naujas taisykles.

Taip pat, kai paveikiamas viso tinklalapio išdėstymas, dalis tinklalapio ar jo dalis gali būti atkurta. Tai yra procesas, žinomas kaip Reflow. Kad vengti pernelyg didelio srauto įsitikinkite, kad per daug nepakeisite DOM. DOM pakeitimai nėra vienintelis dalykas, galintis sukelti „Reflow“ tinklalapyje. Priklausomai nuo naršyklės, taip pat gali prisidėti ir kiti veiksniai.

Apvyniojimas

Apvyniojant daiktus, DOM yra vizualizuotas kaip medis sudarytas iš visų HTML dokumente esančių elementų. Fiziškai (kaip fizinis, kaip ir bet koks skaitmeninis), tai a įmontuotų „JavaScript“ objektų rinkinys kurių savybės ir metodai turi informaciją, kuri leidžia logiškai išdėstyti juos į medį.