HTML DOM: dokumendi objektimudeli kasutamine



See artikkel pakub üksikasjalikke ja põhjalikke teadmisi HTML DOM-ist, näidete abil dokumendi objektimudelist.

Dokumendi objekt tähistab selles aknas kuvatav dokument. Objektil Dokumendil on mitmeid omadusi, mis viitavad teistele objektidele, mis võimaldavad juurdepääsu dokumendi sisule ja selle muutmist. Selles artiklis mõistame HTML DOM-i.

HTML DOM-i kontseptsioon

Dokumenteeritud sisule juurdepääsu ja selle muutmise viisi nimetatakse Dokumendi objekti mudel või DOM. Objektid on korraldatud hierarhias. See hierarhiline struktuur kehtib veebidokumendis olevate objektide korralduse kohta.





  • Aknaobjekt ja miinus hierarhia ülaosa. See on objektihierarhia ülim element.
  • Dokumendiobjekt ja miinus Igast aknasse laaditavast HTML-dokumendist saab dokumendiobjekt. Dokument sisaldab lehe sisu.
  • Vormiobjekt ja miinus Kõik, mis on siltidesse… ümbritsetud, määrab vormiobjekti.
  • Vormi juhtelemendid ja miinus Vormiobjekt sisaldab kõiki selle objekti jaoks määratletud elemente, näiteks tekstiväljad, nupud, raadionupud ja märkeruudud.

Mis on HTML DOM

Dokumendiobjekti mudel on dokumentide programmeerimise API. Objektimudel sarnaneb ise modelleeritavate dokumentide struktuuriga. Näiteks kaaluge seda HTML-dokumendist võetud tabelit:

 
Shady Grove Eolian
Üle jõe, Charlie Dorian

Mis HTML DOM EI OLE

See jaotis on mõeldud dokumendiobjektimudeli täpsemaks mõistmiseks, eristades seda teistest süsteemidest, mis võivad sellega sarnaneda.



informatica juhendaja algajatele pdf tasuta allalaadimine

Kuigi dokumendiobjekti mudelit mõjutas dünaamiline HTML tugevalt, ei rakenda see 1. tasemel kogu dünaamilist HTML-i. Eelkõige pole sündmusi veel määratletud. 1. tase on loodud kindla aluse loomiseks sellisele funktsionaalsusele, pakkudes dokumendi enda kindla ja paindliku mudeli.

Dokumendiobjekti mudel ei ole binaarne spetsifikatsioon. Samas keeles kirjutatud dokumendi objektimudeli programmid ühilduvad platvormide lähtekoodiga, kuid dokumendi objekti mudel ei määratle ühtegi binaarse koostalitlusvõime vormi.

Dokumendiobjekti mudel ei võimalda objektidel püsida XML-i või HTML-i kujul. Selle asemel, et täpsustada, kuidas objekte XML-is võib kujutada, täpsustab dokumendi objektimudel, kuidas XML- ja HTML-dokumente objektidena esitatakse, nii et neid saab kasutada objektorienteeritud programmides.



HTML DOM EI OLE

Dokumendi objektimudel ei ole andmestruktuuride kogum, see on liideseid määrav objektimudel. Ehkki see dokument sisaldab skeeme, mis näitavad vanema ja lapse suhteid, on need loogilised seosed, mis on määratletud programmeerimisliideste abil, mitte ühegi konkreetse sisemise andmestruktuuri esitus.

Dokumendiobjekti mudel ei määratle XML-i ega HTML-i 'tõelist sisemist semantikat'. Nende keelte semantika määratlevad keeled ise.

Dokumendiobjekti mudel on nende semantika austamiseks loodud programmeerimismudel. Dokumendiobjektimudelil pole XML- ja HTML-dokumentide kirjutamise viisi mingeid järeldusi. Kõiki nendes keeltes kirjutatavaid dokumente saab dokumendiobjektide mudelis esindada.

Vaatamata oma nimele ei ole dokumendiobjekti mudel Component Object Model (COM) konkurent. COM, nagu ka CORBA, on keelest sõltumatu viis liideste ja objektide määramiseks. Dokumendiobjektide mudel on HTML- ja XML-dokumentide haldamiseks mõeldud liideste ja objektide kogum. DOM võib ollarakendatakse keelest sõltumatute süsteemide abil, näiteks COM või CORBA, seda saab rakendada ka keelespetsiifiliste sidumiste abil, nagu käesolevas dokumendis määratletud Java või ECMAScript sidemed.

Kust dokumendi objekti mudel pärineb

Dokumendiobjekti mudel pärineb spetsifikatsioonist, mis võimaldab JavaScripti skriptidel ja Java-programmidel olla veebibrauserites kaasaskantav. Dünaamiline HTML oli dokumendi objektimudeli vahetu eellane ja algselt mõeldi sellele suuresti brauserite osas.

Kui aga dokumendiobjekti mudeli töörühm moodustati, liitusid sellega ka teiste domeenide, sealhulgas HTML- või XML-redigeerijate ja dokumendihoidlate pakkujad. Mitmed neist pakkujatest olid enne XML-i väljatöötamist töötanud SGML-iga, dokumendiobjekti mudelit on mõjutanud SGML Groves ja HyTime standard. Mõned neist müüjatest olid pakkumiseks välja töötanud ka oma objektimudelid dokumentide jaoksprogrammeerimis-API-d SGML / XML-i toimetajatele või dokumendihoidlatele ning need objektimudelid on mõjutanud ka dokumendi objektimudelit.

HTML DOM-i atribuudid

Vaatame dokumendiobjektide omadusi, millele dokumendiobjekt pääseb juurde ja mida saab muuta.

DOM-Graph
  1. Akna objekt: Aknaobjekt on alati hierarhia tipus.
  2. Dokumendi objekt: Kui HTML-dokument laaditakse aknasse, saab sellest dokumendiobjekt.
  3. Vormi objekt: Seda esindab vormis sildid.
  4. Lingi objektid: Seda esindab link sildid.
  5. Ankurobjektid: Seda esindab a href sildid.
  6. Vormi kontrollelemendid: Vormil võib olla palju juhtimiselemente, näiteks tekstiväljad, nupud, raadionupud ja märkeruudud jne.

Meetodid dokumendi objekti kohta :

  1. kirjuta ('string'): kirjutab antud stringi dokumendile.
  2. getElementById (): tagastab antud ID väärtusega elemendi.
  3. getElementsByName (): tagastab kõik antud nime väärtusega elemendid.
  4. getElementsByTagName (): tagastab kõik elemendid, millel on antud sildi nimi.
  5. getElementsByClassName (): tagastab kõik antud klassi nimega elemendid.

HTML-elementide leidmine

Kui soovite HTML-elementidele juurde pääseda JavaScripti abil, peate kõigepealt elemendid üles leidma.

Selleks on paar võimalust:

  • HTML-elementide leidmine ID järgi
  • HTML-elementide leidmine sildi nime järgi
  • HTML-elementide leidmine klassi nime järgi

HTML-elemendi leidmine ID järgi

Lihtsaim viis HTML-elemendi leidmiseks DOM-is on elemendi ID kasutamine.

Näide

HTML-elementide leidmine sildi nime järgi

See näide leiab elemendi id = ”main” ja leiab seejärel kõik

põhiosa elemendid:

Sellega jõuame selle HTML DOM-i artikli lõpuni. Loodan, et saite aru HTML DOM-i, dokumendiobjekti mudeli erinevatest aspektidest.

Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagatipuliste ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.

Kas teil on meile küsimus? Palun mainige seda blogi „HTML Images“ kommentaaride jaotises ja me võtame teiega ühendust.

c ++ sorteerimismassiivid