HTML DOM: Kako uporabiti objektni model dokumenta



V tem članku boste našli podrobno in celovito znanje HTML DOM, objektni model dokumenta s primeri.

Objekt dokumenta predstavlja dokument, ki je prikazan v tem oknu. Objekt Document ima različne lastnosti, ki se nanašajo na druge objekte, ki omogočajo dostop do vsebine dokumenta in njegovo spreminjanje. V tem članku bomo razumeli HTML DOM.

Koncept HTML DOM

Način dostopa in spreminjanja dokumentirane vsebine se imenuje Predmetni model dokumenta ali DOM. Predmeti so organizirani v hierarhiji. Ta hierarhična struktura velja za organizacijo predmetov v spletnem dokumentu.





  • Predmet okna & minus Vrh hierarhije. Je najboljši element hierarhije objektov.
  • Predmet dokumenta & minus Vsak dokument HTML, ki se naloži v okno, postane predmet dokumenta. Dokument vsebuje vsebino strani.
  • Predmet obrazca & minus Vse, kar je priloženo oznakam…, nastavi predmet obrazca.
  • Elementi nadzora obrazca & minus Predmet obrazca vsebuje vse elemente, definirane za ta objekt, kot so besedilna polja, gumbi, izbirni gumbi in potrditvena polja.

Kaj je HTML DOM

Document Object Model je programski API za dokumente. Objektni model je zelo podoben strukturi dokumentov, ki jih oblikuje. Upoštevajte na primer to tabelo, povzeto iz dokumenta HTML:

 
Senčni gaj Eolska
Preko reke, Charlie Dorian

Kaj HTML DOM NI

Ta odsek je namenjen natančnejšemu razumevanju objektnega modela dokumenta z razlikovanjem od drugih sistemov, ki se morda zdijo podobni.



Čeprav je na dokumentni objektni model močno vplival dinamični HTML, v 1. stopnji ne izvaja vseh dinamičnih HTML. Dogodki še niso opredeljeni. Stopnja 1 je zasnovana tako, da postavlja trdne temelje za tovrstne funkcionalnosti z zagotavljanjem robustnega, prilagodljivega modela samega dokumenta.

python __init__

Objektni model dokumenta ni binarna specifikacija. Programi Document Object Model, napisani v istem jeziku, bodo na vseh platformah združljivi z izvorno kodo, vendar Document Object Model ne določa nobene oblike binarne interoperabilnosti.

Objektni model dokumenta ne omogoča trajnih objektov v XML ali HTML. Namesto da bi določil, kako so lahko predmeti predstavljeni v XML, objektni model dokumenta določa, kako so dokumenti XML in HTML predstavljeni kot predmeti, tako da se lahko uporabljajo v objektno usmerjenih programih.



HTML DOM NI

Objektni model dokumenta ni skupek podatkovnih struktur, je objektni model, ki določa vmesnike. Čeprav ta dokument vsebuje diagrame, ki prikazujejo odnose med starši in otroki, gre za logična razmerja, ki jih definirajo programski vmesniki, in ne za predstavitev kakršnih koli notranjih podatkovnih struktur.

Objektni model dokumenta ne opredeljuje 'prave notranje semantike' XML ali HTML. Semantiko teh jezikov določajo jeziki sami.

Objektni model dokumenta je programski model, zasnovan tako, da spoštuje to semantiko. Objektni model dokumenta nima nobenih posledic za način pisanja dokumentov XML in HTML, kateri koli dokument, ki ga je mogoče napisati v teh jezikih, je lahko predstavljen v predmetnem modelu dokumenta.

Predmetni dokumentni dokument, kljub svojemu imenu, ni konkurenca komponentnemu predmetnemu modelu (COM). COM, tako kot CORBA, je od jezika neodvisen način določanja vmesnikov in predmetov. Document Object Model je nabor vmesnikov in objektov, namenjenih za upravljanje dokumentov HTML in XML. DOM je lahkoimplementiran z uporabo jezikovno neodvisnih sistemov, kot sta COM ali CORBA, se lahko izvaja tudi z jezikovno specifičnimi vezmi, kot so vezi Java ali ECMAScript, določene v tem dokumentu.

Od kod izvira objektni model dokumenta

Objektni model dokumenta je nastal kot specifikacija, ki omogoča, da so skripti JavaScript in programi Java prenosljivi med spletnimi brskalniki. Dinamični HTML je bil neposredni prednik objektnega modela dokumenta in je bil prvotno mišljen predvsem z vidika brskalnikov.

Ko pa je bila ustanovljena delovna skupina za dokumentni objektni model, so se ji pridružili tudi ponudniki v drugih domenah, vključno z urejevalniki HTML ali XML in repozitoriji dokumentov. Več teh prodajalcev je že delalo s SGML, preden je bil razvit XML, zato so na objektni model dokumenta vplivali SGML Groves in standard HyTime. Nekateri od teh prodajalcev so razvili tudi lastne objektne modele za dokumente, da bi jih zagotoviliprogramski API-ji za urejevalnike SGML / XML ali skladišča dokumentov, ti objektni modeli pa so vplivali tudi na objektni model dokumenta.

Lastnosti HTML DOM

Oglejmo si lastnosti predmetnih dokumentov, do katerih lahko dostopa in spreminja objektni dokument.

DOM-Graph
  1. Predmet okna: Okenski objekt je vedno na vrhu hierarhije.
  2. Predmet dokumenta: Ko je dokument HTML naložen v okno, postane predmet.
  3. Predmet obrazca: Zastopa ga oblika oznake.
  4. Predmeti povezave: Zastopa ga povezava oznake.
  5. Sidrni predmeti: Zastopa ga href oznake.
  6. Elementi za nadzor obrazca: Obrazec ima lahko veliko nadzornih elementov, kot so besedilna polja, gumbi, izbirni gumbi, potrditvena polja itd.

Metode predmeta dokumenta :

  1. zapis ('niz'): napiše dani niz v dokument.
  2. getElementById (): vrne element z dano vrednostjo id.
  3. getElementsByName (): vrne vse elemente z dano imensko vrednostjo.
  4. getElementsByTagName (): vrne vse elemente z danim imenom oznake.
  5. getElementsByClassName (): vrne vse elemente z danim imenom razreda.

Iskanje elementov HTML

Ko želite dostopati do elementov HTML z JavaScriptom, morate najprej najti elemente.

To lahko storite na nekaj načinov:

pl sql vadnica za začetnike s primeri
  • Iskanje elementov HTML po id
  • Iskanje elementov HTML po imenu oznake
  • Iskanje elementov HTML po imenu razreda

Iskanje elementa HTML po ID-ju

Element HTML v DOM-u najlažje najdemo z uporabo elementa id.

Primer

Iskanje elementov HTML po imenu oznake

Ta primer poišče element z id = ”main” in nato poišče vse

elementi znotraj 'main':

S tem smo prišli do konca tega članka HTML DOM. Upam, da ste razumeli različne vidike HTML DOM, objektnega modela dokumenta.

Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega življenja To usposabljanje vam omogoči, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.

Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje bloga 'HTML Images' in se bomo javili.