HTML DOM: Kaip naudoti dokumento objekto modelį



Šis straipsnis suteiks jums išsamių ir išsamių žinių apie HTML DOM, „Document Object Model“ su pavyzdžiais.

Dokumento objektas žymi dokumentą, kuris rodomas tame lange. Objektas Dokumentas turi įvairių ypatybių, kurios nurodo kitus objektus, leidžiančius pasiekti ir modifikuoti dokumento turinį. Šiame straipsnyje mes suprasime HTML DOM.

HTML DOM koncepcija

Būdas, kaip pasiekiamas ir modifikuojamas dokumentuotas turinys, vadinamas Dokumento objekto modelis arba DOM. Objektai yra išdėstyti hierarchijoje. Ši hierarchinė struktūra taikoma objektų organizavimui žiniatinklio dokumente.





  • Lango objektas ir minusas hierarchijos viršus. Tai yra aukščiausias objekto hierarchijos elementas.
  • Dokumento objektas ir minusas Kiekvienas į langą įkeltas HTML dokumentas tampa dokumento objektu. Dokumente yra puslapio turinys.
  • Formos objektas ir minusas Viskas, uždėta žymose…, nustato formos objektą.
  • Formos valdymo elementai ir minusas. Formos objekte yra visi tam objektui nustatyti elementai, pvz., Teksto laukai, mygtukai, radijo mygtukai ir žymės langeliai.

Kas yra HTML DOM

„Document Object Model“ yra programavimo API, skirta dokumentams. Pats objekto modelis labai panašus į jo modeliuojamų dokumentų struktūrą. Pavyzdžiui, apsvarstykite šią lentelę, paimtą iš HTML dokumento:

 
Šešėlis Giraitė Eolianas
Per upę, Čarli Dorianas

Kas nėra HTML DOM

Šis skyrius skirtas tiksliau suprasti dokumento objekto modelį, atskiriant jį nuo kitų sistemų, kurios gali atrodyti panašios.



Nors dokumento objekto modeliui didelę įtaką darė dinaminis HTML, 1 lygiu jis neįdiegia viso dinaminio HTML. Visų pirma, įvykiai dar nėra apibrėžti. 1 lygis sukurtas norint sukurti tvirtą tokio pobūdžio funkcijų pagrindą pateikiant tvirtą, lanksčią paties dokumento modelį.

Dokumento objekto modelis nėra dvejetainė specifikacija. Ta pačia kalba parašytos „Document Object Model“ programos bus suderinamos su šaltinio kodu visose platformose, tačiau „Document Object Model“ neapibrėžia jokios dvejetainės sąveikos formos.

Dokumento objekto modelis nėra būdas išlaikyti objektus XML ar HTML. Užuot nurodęs, kaip objektai gali būti vaizduojami XML, dokumento objekto modelyje nurodoma, kaip XML ir HTML dokumentai vaizduojami kaip objektai, kad juos būtų galima naudoti į objektą orientuotose programose.



HTML DOM NĖRA

Dokumento objekto modelis nėra duomenų struktūrų rinkinys, tai yra objektų modelis, nurodantis sąsajas. Nors šiame dokumente yra diagramos, rodančios tėvų ir vaikų santykius, tai yra loginiai ryšiai, apibrėžti programavimo sąsajose, o ne konkrečių vidinių duomenų struktūrų vaizdai.

kas yra sesija java

Dokumento objekto modelis neapibrėžia „tikrosios vidinės semantikos“ XML ar HTML. Tų kalbų semantiką apibrėžia pačios kalbos.

Dokumento objekto modelis yra programavimo modelis, sukurtas laikytis šios semantikos. Dokumento objekto modelis neturi jokių XML ir HTML dokumentų rašymo būdų. Bet koks dokumentas, kurį galima parašyti šiomis kalbomis, gali būti pateiktas dokumento objekto modelyje.

Nepaisant pavadinimo, „Document Object Model“ nėra „Component Object Model“ (COM) konkurentas. COM, kaip ir CORBA, yra nuo kalbos nepriklausomas būdas nurodyti sąsajas ir objektus. Dokumento objekto modelis yra sąsajų ir objektų rinkinys, skirtas HTML ir XML dokumentams tvarkyti. DOM gali būtiįdiegtas naudojant nuo kalbos nepriklausomas sistemas, tokias kaip COM arba CORBA, jis taip pat gali būti įgyvendinamas naudojant konkrečiai kalbai skirtus susiejimus, tokius kaip „Java“ arba „ECMAScript“ susiejimai, nurodyti šiame dokumente.

Iš kur atsirado dokumento objekto modelis

Dokumento objekto modelis atsirado kaip specifikacija, leidžianti „JavaScript“ scenarijus ir „Java“ programas perkelti tarp žiniatinklio naršyklių. Dinaminis HTML buvo tiesioginis dokumento objekto modelio protėvis, ir iš pradžių apie jį galvota naršyklių požiūriu.

Tačiau, kai buvo suformuota „Dokumento objekto modelio“ darbo grupė, prie jos prisijungė ir kitų sričių tiekėjai, įskaitant HTML ar XML redaktorius ir dokumentų saugyklas. Keli iš šių pardavėjų dirbo su SGML, kol XML nebuvo sukurtas, o dokumento objekto modeliui įtakos turėjo SGML Groves ir „HyTime“ standartas. Kai kurie iš šių pardavėjų taip pat sukūrė savo objektų modelius dokumentams pateiktiprogramavimo API, skirtos SGML / XML redaktoriams ar dokumentų saugykloms, ir šie objektų modeliai taip pat paveikė dokumento objekto modelį.

HTML DOM ypatybės

Pažiūrėkime dokumento objektų savybes, kurias gali pasiekti ir modifikuoti dokumento objektas.

DOM-Graph
  1. Lango objektas: Lango objektas visada yra hierarchijos viršuje.
  2. Dokumento objektas: Kai HTML dokumentas įkeliamas į langą, jis tampa dokumento objektu.
  3. Formos objektas: Jai atstovauja forma žymos.
  4. Susieti objektus: Jai atstovauja nuoroda žymos.
  5. Inkaro objektai: Jai atstovauja hrefas žymos.
  6. Formos valdymo elementai: Formoje gali būti daug valdymo elementų, tokių kaip teksto laukai, mygtukai, radijo mygtukai ir žymės langeliai ir kt.

Metodai dokumento objekto :

  1. rašyti („eilutė“): užrašo nurodytą eilutę dokumente.
  2. „getElementById“ (): grąžina elementą, turintį nurodytą id vertę.
  3. getElementsByName (): grąžina visus elementus, turinčius nurodytą vardo vertę.
  4. getElementsByTagName (): pateikia visus elementus, turinčius nurodytą žymos pavadinimą.
  5. getElementsByClassName (): grąžina visus elementus, turinčius nurodytą klasės pavadinimą.

HTML elementų paieška

Jei norite pasiekti HTML elementus naudodami „JavaScript“, pirmiausia turite surasti elementus.

Yra keli būdai, kaip tai padaryti:

  • HTML elementų paieška pagal ID
  • HTML elementų paieška pagal žymos pavadinimą
  • HTML elementų paieška pagal klasės pavadinimą

HTML elemento radimas pagal ID

Lengviausias būdas rasti HTML elementą DOM yra naudoti elemento ID.

Pavyzdys

HTML elementų radimas pagal žymos pavadinimą

Šis pavyzdys suranda elementą su id = ”main”, tada suranda visus

elementai „main“ viduje:

Tuo mes baigėme šį HTML DOM straipsnį. Tikiuosi, kad supratote įvairius HTML DOM aspektus, „Document Object Model“.

Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su išorinėmis ir išorinėmis interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.

Turite mums klausimą? Prašau tai paminėti tinklaraščio „HTML vaizdai“ komentarų skyriuje ir mes su jumis susisieksime.