HTML DOM: Kako koristiti objektni model dokumenta

Objekt dokumenta predstavlja dokument koji je prikazan u tom prozoru. Objekt Document ima različita svojstva koja se odnose na druge objekte koji omogućuju pristup i izmjenu sadržaja dokumenta. U ovom ćemo članku razumjeti HTML DOM.

• HTML DOM koncept
• Što je HTML DOM
• Što HTML DOM NIJE
• Odakle DOM
• Svojstva HTML DOM-a
• Pronalaženje HTML elemenata

HTML DOM koncept

Način pristupa i modificiranja dokumentiranog sadržaja naziva se Model objekta dokumenta ili DOM. Objekti su organizirani u hijerarhiji. Ova se hijerarhijska struktura odnosi na organizaciju objekata u web dokumentu.

• Prozorni objekt & minus vrh hijerarhije. To je najviši element hijerarhije objekata.
• Objekt dokumenta & minus Svaki HTML dokument koji se učita u prozor postaje objektom dokumenta. Dokument sadrži sadržaj stranice.
• Objekt obrasca & minus Sve što je priloženo u oznakama… postavlja oblik obrasca.
• Elementi kontrole obrasca & minus Objekt obrasca sadrži sve elemente definirane za taj objekt, poput tekstualnih polja, gumba, radio gumba i potvrdnih okvira.

Što je HTML DOM

Objektni model dokumenta je API za programiranje dokumenata. Sam objektni model blisko podsjeća na strukturu dokumenata koje modelira. Na primjer, uzmite u obzir ovu tablicu preuzetu iz HTML dokumenta:

 
 
 
Sjenoviti gaj
 
Eolski
 
 
 
Preko rijeke, Charlie
 
Dorian
 
    

Što HTML DOM NIJE

Ovaj je odjeljak dizajniran da pruži preciznije razumijevanje objektnog modela dokumenta tako što ga razlikuje od ostalih sustava za koje se čini da su im slični.

Iako je na objektni model dokumenta snažno utjecao dinamički HTML, na razini 1 on ne implementira sav dinamički HTML. Konkretno, događaji još nisu definirani. Razina 1 stvorena je da postavi čvrste temelje za ovu vrstu funkcionalnosti pružajući robustan, fleksibilan model samog dokumenta.

Objektni model dokumenta nije binarna specifikacija. Programi objektnog modela dokumenata napisani na istom jeziku bit će kompatibilni s izvornim kodom na različitim platformama, ali objektni model dokumenta ne definira nijedan oblik binarne interoperabilnosti.

Objektni model dokumenta nije način ustrajavanja objekata u XML-u ili HTML-u. Umjesto da specificira kako objekti mogu biti predstavljeni u XML-u, objektni model dokumenta određuje kako su XML i HTML dokumenti predstavljeni kao objekti, tako da se mogu koristiti u objektno orijentiranim programima.

Objektni model dokumenta nije skup podatkovnih struktura, to je objektni model koji specificira sučelja. Iako ovaj dokument sadrži dijagrame koji prikazuju odnose roditelj / dijete, to su logički odnosi definirani programskim sučeljima, a ne prikazi bilo koje određene unutarnje strukture podataka.

Objektni model dokumenta ne definira 'istinsku unutarnju semantiku' XML-a ili HTML-a. Semantiku tih jezika definiraju sami jezici.

Objektni model dokumenta je programski model dizajniran da poštuje ovu semantiku. Objektni model dokumenta nema posljedice za način na koji pišete XML i HTML dokumente, bilo koji dokument koji može biti napisan na tim jezicima može biti predstavljen u objektnom modelu dokumenta.

Objektni model dokumenta, unatoč svom imenu, nije konkurencija komponentnom objektnom modelu (COM). COM, poput CORBA, jezik je neovisan način specificiranja sučelja i objekata. Document Object Model je skup sučelja i objekata dizajniranih za upravljanje HTML i XML dokumentima. DOM može bitiimplementiran pomoću jezično neovisnih sustava kao što su COM ili CORBA, također se može implementirati pomoću jezičnih veza kao što su Java ili ECMAScript vezi navedeni u ovom dokumentu.

Odakle je došao objektni model dokumenta

Objektni model dokumenta nastao je kao specifikacija kako bi JavaScript skripte i Java programi mogli biti prenosivi među web preglednicima. Dinamički HTML bio je neposredni predak objektnog modela dokumenta i o njemu se prvotno razmišljalo uglavnom u smislu preglednika.

Međutim, kad je osnovana Radna grupa za objektni model dokumenta, pridružili su joj se i dobavljači u drugim domenama, uključujući HTML ili XML urednike i spremišta dokumenata. Nekoliko je ovih dobavljača radilo sa SGML-om prije nego što je XML razvijen kao rezultat, na objektni model dokumenta utjecali su SGML Groves i HyTime standard. Neki od tih dobavljača također su razvili vlastite objektne modele za dokumente kako bi ih mogli pružitiAPI-ji za programiranje za SGML / XML urednike ili spremišta dokumenata, a ovi objektni modeli također su utjecali na objektni model dokumenta.

Svojstva HTML DOM-a

Pogledajmo svojstva objekata dokumenta kojima objekt dokumenta može pristupiti i izmijeniti ih.

1. Objekt prozora: Prozorni objekt uvijek je na vrhu hijerarhije.
2. Predmet dokumenta: Kada se HTML dokument učita u prozor, on postaje objektom dokumenta.
3. Predmet obrasca: Zastupljen je sa oblik oznake.
4. Objekti veze: Zastupljen je sa veza oznake.
5. Sidreni objekti: Zastupljen je sa href oznake.
6. Elementi kontrole obrasca: Obrazac može imati mnogo kontrolnih elemenata poput tekstualnih polja, gumba, radio gumba i potvrdnih okvira itd.

Metode predmeta dokumenta :

1. napiši ('niz'): zapisuje zadani niz u dokument.
2. getElementById (): vraća element koji ima zadanu vrijednost id.
3. getElementsByName (): vraća sve elemente koji imaju zadanu vrijednost imena.
4. getElementsByTagName (): vraća sve elemente koji imaju dano ime oznake.
5. getElementsByClassName (): vraća sve elemente koji imaju dano ime klase.

Pronalaženje HTML elemenata

Kada želite pristupiti HTML elementima s JavaScriptom, prvo morate pronaći elemente.

Postoji nekoliko načina za to:

• Pronalaženje HTML elemenata po id-u
• Pronalaženje HTML elemenata prema nazivu oznake
• Pronalaženje HTML elemenata prema nazivu klase

Pronalaženje HTML elementa prema ID-u

HTML element u DOM-u najlakše je pronaći pomoću elementa id.

Primjer

Pronalaženje HTML elemenata prema nazivu oznake

kako izraditi Salesforce aplikaciju

Ovaj primjer pronalazi element s id = ”main”, a zatim pronalazi sve

elementi unutar 'main':

Ovim smo došli do kraja ovog HTML DOM članka. Nadam se da ste razumjeli različite aspekte HTML DOM-a, objektnog modela dokumenta.

Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare na blogu 'HTML Images' i javit ćemo vam se.