Razumijevanje objektnog modela dokumenta (DOM) u pojedinostima

Svi smo čuli za DOM, ili Objektni model dokumenta, koje se povremeno spominju, a odnose se na JavaScript. DOM je vrlo važan koncept u razvoju weba. Bez nje ne bismo mogli dinamički modificirati HTML stranice u pregledniku.

Učenje i razumijevanje DOM-a rezultira boljim načinima pristup, promjenu i nadzor različitih elemenata HTML stranice. Objektni model dokumenta također nam može pomoći smanjiti nepotrebno povećanje vremena izvođenja skripte.

Stabla strukture podataka

Prije razgovora o tome što je DOM, kako nastaje, kako postoji, i što se događa unutar njega, želim da znate o drveću. Ne crnogorične i listopadne vrste nego o stablo strukture podataka.

Mnogo je lakše shvatiti koncept struktura podataka ako pojednostavimo njegovu definiciju. Rekao bih da se radi o strukturi podataka raspoređivanje podataka. Da, samo običan stari aranžman, kao što biste uredili namještaj u vašoj kući ili knjige na policu za knjige ili sve različite grupe hrane koje jedete na tanjuru kako biste učinite ga smislenim.

Naravno, to nije sve u strukturi podataka, ali to je uglavnom mjesto gdje sve počinje. Ovaj “uređenje” je u srcu svega. Vrlo je važno iu DOM-u. Ali još ne govorimo o DOM-u, pa dopustite mi da vas usmjerim prema a strukturu podataka koju možda poznajete: nizovi.

Nizovi i drveće

Nizovi imaju indeksi i dužina, oni mogu biti višedimenzionalan, i imaju mnogo više karakteristika. Koliko god je važno znati te stvari o nizovima, nemojmo se sada mučiti s tim. Za nas je niz prilično jednostavan. To je kad ti rasporedite različite stvari u liniji.

Slično tome, kad razmišljamo o drveću, recimo, radi se o tome stavljajući stvari pod jedan drugi, počevši od samo jedne stvari na vrhu.

Sada, možete uzeti jednu liniju patke od prije, okrenite ga uspravno, i reci mi to “sada, svaka patka je pod drugom patkom”. Je li to onda drvo? to je.

Ovisno o tome što su vaši podaci ili kako ćete ga koristiti, najviši podaci u vašem stablu (nazivaju se korijen) može biti nešto što jest od velike važnosti ili nešto što je samo tamo priložiti druge elemente ispod njega.

U svakom slučaju, najviši element u strukturi podataka o stablu čini nešto vrlo važno. Ona pruža mjesto početi tražiti bilo koju informaciju koju želimo izvaditi iz stabla.

Značenje DOM-a

DOM znači Objektni model dokumenta. Dokument ukazuje na HTML (XML) dokument koji je predstavljen kao Objekt. (U JavaScriptu se sve može prikazati samo kao objekt!)

Model je koju je izradio preglednik koja uzima HTML dokument i stvara objekt koji ga predstavlja. Ovom objektu možemo pristupiti pomoću JavaScripta. A budući da koristimo ovaj objekt za manipulaciju HTML dokumenta i izgradnju vlastitih aplikacija, DOM je u osnovi jedan API.

DOM stablo

U JavaScript kodu je HTML dokument predstavljen kao objekt. Svi podaci koji se čitaju iz tog dokumenta su također spremljene kao objekti, ugniježđeni jedan ispod drugoga (jer kao što sam rekao ranije, u JavaScriptu se sve može ikada predstaviti samo kao objekti).

Dakle, to je u osnovi fizički raspored DOM podataka u kodu: sve je uređeni kao objekti. Logično, međutim, to je drvo.

DOM Parser

Svaki softver preglednika ima program koji se zove DOM Parser za koje je odgovoran raščlanjivanjem HTML dokumenta u DOM.

Preglednici čitaju HTML stranicu i pretvaraju podatke u objekte koji čine DOM. Informacije koje se nalaze u tim JavaScript DOM objektima logički su uređene kao stablo strukture podataka poznato kao DOM stablo.

Raščlanjivanje podataka iz HTML-a u DOM stablo

Uzmite jednostavnu HTML datoteku. Ima korijenski element . svoj pod-elemente su i , svaka od njih ima mnogo vlastitih dječjih elemenata.

U biti, preglednik čita podatke u HTML dokumentu, nešto slično ovome:

I, raspoređuje ih u DOM stablo kao ovo:

Prikaz svakog HTML elementa (i njegovog sadržaja) u DOM stablu poznat je kao a Čvor. root čvor je čvorište .

DOM sučelje u JavaScriptu se zove dokument (budući da je prikaz HTML dokumenta). Tako pristupamo DOM stablu HTML dokumenta kroz dokument sučelje u JavaScriptu.

Ne možemo samo pristupiti, ali također manipulirati HTML dokumentom putem DOM-a. Možemo dodati elemente na web-stranicu, ukloniti ih i ažurirati. Svaki put kad promijenimo ili ažuriramo bilo koja čvora u DOM stablu, on će odražava se na web stranici.

Kako su dizajnirani čvorovi

Već sam spomenuo da je svaki dio podataka iz HTML dokumenta spremljene kao objekt u JavaScriptu. Dakle, kako se podaci spremljeni kao objekt mogu logički urediti kao stablo?

Čvorovi DOM stabla imaju određena svojstva ili svojstva. Gotovo svaki čvor u stablu ima nadređeni čvor (čvor iznad njega), dječji čvorovi (čvorovi ispod njega) i braća i sestre (drugi čvorovi koji pripadaju istom roditelju). Imajući ovo obitelj iznad, ispod i oko čvora je ono što ga kvalificira kao dio stabla.

Ova obiteljska informacija svakog čvora je spremljene kao svojstva u objektu koji predstavlja taj čvor. Na primjer, djeca je svojstvo čvora koji nosi popis podređenih elemenata tog čvora, što logično uređuje svoje podređene elemente ispod čvora.

Izbjegavajte prekomjernu manipulaciju DOM-om

Koliko god smo mogli smatrati da je ažuriranje DOM-a korisno (kako bi se izmijenila web stranica), postoji nešto kao pretjerati.

Recite, želite li ažurirati boju a