DOM (Document Object Model) -kohdan ymmärtäminen kohdassa Tiedot

Olemme kaikki kuulleet DOM, tai Asiakirjaobjektimalli, joka saa mainita ajoittain ja liittyy JavaScriptiin. DOM on melko tärkeä käsite web-kehityksessä. Ilman sitä emme pystyisi muokkaa HTML-sivuja dynaamisesti selaimessa.

DOM: n oppiminen ja ymmärtäminen johtaa parempiin tapoihin pääsy, muuttaminen ja seuranta HTML-sivun eri elementtejä. Asiakirjaobjektimalli voi myös auttaa meitä vähentää tarpeettomia lisäyksiä skriptin suoritusaikaan.

Tietorakenne puita

Ennen kuin puhutaan siitä, mitä DOM on, miten se tulee olemaan, miten se on olemassa ja mitä sen sisällä tapahtuu, haluan sinun tietää puista. Ei havupuiden ja lehtipuiden laatu, vaan siitä tietojen rakenne.

On helpompaa ymmärtää tietorakenteiden käsite, jos yksinkertaistamme sen määritelmää. Sanoisin, että tietorakenne on kyse tietojen järjestäminen. Kyllä, pelkkää vanhaa järjestelyä, koska olisit järjestänyt talosi huonekalut tai kirjat kirjahyllyssä tai eri ruokaryhmissä, jotka sinulla on aterianne levylläsi tehdä siitä mielekästä.

Tietysti kaikki ei ole tietorakenteessa, mutta se on melko paljon missä se kaikki alkaa. Tämä “järjestely” on kaiken ytimessä. Se on melko tärkeää myös DOM: ssa. Mutta emme puhu vielä DOMista, joten haluan ohjata sinua kohti a tietorakenne, jota saatat tuntea: taulukot.

Piirit ja puut

Argeleilla on indeksit ja pituus, ne voivat olla moniulotteinen, ja niillä on monia muita ominaisuuksia. Niin paljon kuin on tärkeää tietää nämä asiat matriiseista, älkäämme vaivaa itseämme juuri nyt. Meille ryhmä on melko yksinkertainen. Se on kun sinä järjestää erilaisia asioita riviin.

Samoin, kun ajatellaan puita, sanotaan, se on kyse laittaa asiat toistensa alle, alkaen vain yhdestä asiasta.

Nyt saatat ottaa yhden rivin ankat aikaisemmin, käännä se pystyasentoon, ja kerro minulle “nyt jokainen ankka on toisen ankka”. Onko se sitten puu? se on.

Riippuen siitä, mitä tietojasi on tai miten sitä käytetään, puun korkeimmat tiedot (nimeltään juuri) voi olla jotain erittäin tärkeää tai jotain, joka on vain siellä liittää sen alle muita elementtejä.

Joka tapauksessa puun tietorakenteen ylin elementti tekee jotain hyvin tärkeää. Se tarjoaa paikan alkaa etsiä mitä tahansa tietoa, jota haluamme purkaa puusta.

DOM: n merkitys

DOM tarkoittaa Asiakirjaobjektimalli. Asiakirja viittaa HTML (XML) -asiakirjaan mikä on edustettuna objektina. (JavaScriptissä kaikki voi olla vain esineenä!)

Malli on selaimen luoma joka ottaa HTML-asiakirjan ja luo sen edustavan objektin. Voimme käyttää tätä objektia JavaScriptin avulla. Ja koska käytämme tätä objektia manipuloida HTML-dokumenttia ja rakentaa omia sovelluksia, DOM on pohjimmiltaan API.

DOM-puu

JavaScript-koodissa HTML-dokumentti on edustettuna esineenä. Kaikki kyseisestä asiakirjasta luetut tiedot ovat tallennettu myös esineinä, sisäkkäin toisistaan (koska kuten aiemmin sanoin, JavaScriptissä kaikki voi olla vain esineinä).

Joten tämä on periaatteessa DOM-tietojen fyysinen järjestely koodissa: kaikki on järjestetty esineiksi. Loogisesti kuitenkin, se on puu.

DOM Parser

Jokaisella selainohjelmalla on ohjelma, jota kutsutaan DOM Parser joka on vastuussa HTML-asiakirjan jäsentäminen DOM: iin.

Selaimet lukevat HTML-sivun ja muuttavat sen tiedot kohteiksi, jotka muodostavat DOM: n. Näissä JavaScript-DOM-objekteissa olevat tiedot on järjestetty loogisesti DOM-puuksi tunnetuksi datarakenteen puuksi.

Jäsentämällä tietoja HTML: stä DOM-puuhun

Ota yksinkertainen HTML-tiedosto. Siinä on juurielementti . Sen osaelementtejä olemme ja , jokaisella on monia omia lapsielementtejä.

Niin olennaisesti selain lukee HTML-asiakirjan tiedot, jotain vastaavaa:

Ja, järjestää ne DOM-puuhun kuten tämä:

Kunkin HTML-elementin (ja sen sisällön) esitys DOM-puussa tunnetaan nimellä a Solmu. root-solmu on solmu .

DOM-liitäntä JavaScriptissä kutsutaan asiakirja (koska se on HTML-dokumentin esitys). Siten pääsemme HTML-asiakirjan DOM-puuhun läpi asiakirja liitäntä JavaScriptissä.

Emme voi käyttää vain, mutta myös manipuloida HTML-dokumenttia DOM: n kautta. Voimme lisätä elementtejä verkkosivulle, poistaa ja päivittää niitä. Joka kerta kun muutamme tai päivitämme DOM-puun solmut heijastaa verkkosivulla.

Miten solmut on suunniteltu

Olen jo maininnut, että jokainen HTML-asiakirjan tieto on tallennettu objektiksi JavaScriptissä. Joten, miten tieto tallennetaan objektiksi voidaan järjestää loogisesti puuksi?

DOM-puun solmuilla on tiettyjä ominaisuuksia tai ominaisuuksia. Lähes jokainen puun solmu on vanhempi solmu (solmu sen yläpuolella), lasten solmut (solmut sen alapuolella) ja sisarukset (muut solmit, jotka kuuluvat samaan vanhempaan). Ottaa tämä perhe yllä, alapuolella ja solmun ympärillä on se, mikä merkitsee sitä a osa puuta.

Tämä jokaisen solmun perheinformaatio on tallennetaan kyseistä solmua edustavaan objektiin. Esimerkiksi, lapset on solmun ominaisuus, joka kuljettaa luettelon kyseisen solmun lapsielementeistä, siten järjestämällä loogisesti sen lapsielementit solmun alle.

Vältä DOM-manipulaation liioittelua

Niin paljon kuin löydämme DOM: n päivittämisen hyödylliseksi (verkkosivun muokkaamiseksi), on olemassa sellainen asia kuin liioittelee sitä.

Sano, että haluat päivittää a: n värin

verkkosivulla JavaScriptin avulla. Mitä sinun tarvitsee tehdä pääsy vastaavaan DOM-solmuobjektiin ja päivitä väriominaisuus. Tämän ei pitäisi vaikuttaa muuhun puuhun (puun muut solmut).

Mutta mitä jos haluat poista solmu puusta tai lisää yksi siihen? Koko puu on ehkä järjestettävä uudelleen, kun solmu on poistettu tai lisätty puuhun. Tämä on kallista työtä. Tämän työn tekeminen vie aikaa ja selaimen resursseja.

Sanotaan esimerkiksi, että haluat lisää viisi ylimääräistä riviä taulukkoon. Jokaiselle riville, kun sen uudet solmut luodaan ja lisätään DOM: iin, puu päivitetään joka kerta, yhteensä enintään viisi päivitystä.

Voimme välttää tämän käyttämällä DocumentFragment käyttöliittymä. Ajattele sitä laatikkona, joka voisi pidä kaikki viisi riviä ja lisätään puuhun. Näin viisi riviä ovat lisätään yhtenä tietona eikä yksi kerrallaan, mikä johtaa vain yhteen päivitykseen puussa.

Tämä ei tapahdu vain, kun poistamme tai lisätään elementtejä elementin koon muuttaminen voi vaikuttaa myös muihin solmuihin, koska muutettu elementti saattaa tarvita muita elementtejä sen ympärille säätää niiden kokoa. Niinpä kaikkien muiden elementtien vastaavat solmut on päivitettävä ja HTML-elementit muutetaan uudelleen uusien sääntöjen mukaisesti.

Samoin, kun se vaikuttaa koko verkkosivun asetteluun, osa tai koko web-sivu voidaan saattaa uudelleen. Tämä on prosessi, jota kutsutaan nimellä reflow. Jotta välttää liiallista palautumista varmista, että DOM ei muutu liikaa. DOM: n muutokset eivät ole ainoa asia, joka voi aiheuttaa Reflow-sivuston web-sivulla. Selaimesta riippuen myös muut tekijät voivat vaikuttaa siihen.

Käärimistä

Kääri asioita, DOM on visualisoitu puuksi koostuu kaikista HTML-asiakirjassa olevista elementeistä. Fyysisesti (niin fyysinen kuin mikä tahansa digitaalinen voi saada), se on a joukko sisäkkäisiä JavaScript-objekteja joista ominaisuudet ja menetelmät pitävät tiedot, jotka mahdollistavat järjestää ne loogisesti puuhun.