HTML DOM: A dokumentumobjektum-modell használata



Ez a cikk részletes és átfogó ismereteket nyújt a HTML DOM-ról, a dokumentumobjektum-modellről, példákkal.

A Document objektum a abban az ablakban megjelenő dokumentum. A Document objektum különféle tulajdonságokkal rendelkezik, amelyek más objektumokra utalnak, amelyek lehetővé teszik a dokumentum tartalmának elérését és módosítását. Ebben a cikkben megértjük a HTML DOM-ot.

HTML DOM koncepció

A dokumentált tartalomhoz való hozzáférés és módosítás módját hívjuk Dokumentum objektum modell , vagy DOM. Az objektumok hierarchiában vannak rendezve. Ez a hierarchikus felépítés az objektumok webdokumentumokban történő rendezésére vonatkozik.





  • Ablak objektum és mínusz a hierarchia teteje. Ez az objektumhierarchia legfelső eleme.
  • Dokumentumobjektum és mínusz Minden ablakba betöltött HTML dokumentum dokumentumobjektummá válik. A dokumentum tartalmazza az oldal tartalmát.
  • Űrobjektum és mínusz A… címkékbe foglalt minden beállítja az űrlapobjektumot.
  • Űrlapvezérlő elemek és mínusz Az űrlapobjektum tartalmazza az adott objektumhoz meghatározott összes elemet, például szövegmezőket, gombokat, választógombokat és jelölőnégyzeteket.

Mi a HTML DOM

A Document Object Model egy programozási API a dokumentumokhoz. Maga az objektum modell szorosan hasonlít az általa modellezett dokumentumok felépítésére. Tekintsük például ezt a táblázatot, amely egy HTML dokumentumból származik:

 
Shady Grove Lipari
A folyó felett, Charlie dór

Mi NEM a HTML DOM

Ennek a szakasznak a célja a dokumentumobjektum modell pontosabb megértése azáltal, hogy megkülönbözteti azt más rendszerektől, amelyek hasonlónak tűnhetnek.



Bár a dokumentumobjektum-modellt erőteljesen befolyásolta a dinamikus HTML, az 1. szinten nem valósítja meg az összes dinamikus HTML-t. Különösen az eseményeket még nem határozták meg. Az 1. szintet úgy tervezték, hogy szilárd alapot teremtsen az ilyen jellegű funkcionalitáshoz azáltal, hogy maga a dokumentum robusztus, rugalmas modelljét nyújtja.

A Document Object Model nem bináris specifikáció. Az ugyanazon a nyelven írt Document Object Model programok forráskóddal kompatibilisek lesznek az összes platformon, de a Document Object Model nem határoz meg semmilyen bináris interoperabilitási formát.

mi a jit compiler a java-ban

A dokumentumobjektum-modell nem alkalmas az objektumok XML-re vagy HTML-re történő fennmaradására. A dokumentumobjektum-modell ahelyett, hogy meghatározná, hogyan jeleníthetők meg az objektumok az XML-ben, megadja, hogy az XML- és a HTML-dokumentumok hogyan jelenjenek meg objektumokként, így objektum-orientált programokban használhatók fel.



A HTML DOM NEM

A Document Object Model nem adatstruktúrák összessége, hanem objektummodell, amely interfészeket határoz meg. Bár ez a dokumentum a szülő / gyermek kapcsolatokat bemutató diagramokat tartalmaz, ezek logikai kapcsolatok, amelyeket a programozási interfészek határoznak meg, nem képviselnek egyetlen sajátos belső adatstruktúrát sem.

A dokumentumobjektum-modell nem határozza meg az XML vagy a HTML „valódi belső szemantikáját”. E nyelvek szemantikáját maguk a nyelvek határozzák meg.

A Document Object Model egy programozási modell, amelyet ezen szemantika tiszteletben tartására terveztek. A dokumentumobjektum-modell nem rendelkezik levonásokkal az XML- és HTML-dokumentumok írásának módjáról, bármelyik, ezeken a nyelveken írható dokumentum képviselhető a dokumentumobjektum-modellben.

A Document Object Model a neve ellenére nem versenytársa a Component Object Model (COM) modellnek. A COM, a CORBA-hoz hasonlóan, nyelvektől független módszer az interfészek és objektumok megadására. A Document Object Model interfészek és objektumok halmaza, amelyet HTML és XML dokumentumok kezelésére terveztek. A DOM lehetnyelvfüggetlen rendszerek, például COM vagy CORBA segítségével valósítható meg, nyelvspecifikus kötésekkel, például a dokumentumban meghatározott Java vagy ECMAScript kötésekkel is.

Honnan származik a dokumentumobjektum-modell

A Document Object Model specifikációként jött létre, hogy a JavaScript-szkriptek és Java-programok hordozhatók legyenek a webböngészők között. A dinamikus HTML volt a Document Object Model közvetlen őse, és eredetileg nagyrészt a böngészőkben gondolták.

mi a különbség a felülbírálás és a túlterhelés között

A dokumentumobjektum-modell munkacsoport megalakulásakor azonban más tartományok szállítói is csatlakoztak hozzá, ideértve a HTML- vagy XML-szerkesztőket és a dokumentumtárakat. Ezen szállítók közül többen az XML kidolgozása előtt dolgozták az SGML-t, az SGML Groves és a HyTime szabvány hatással volt a Document Object Model-re. Ezen szállítók egy része saját objektummodelljét is kidolgozta a dokumentumok számára annak biztosítása érdekébenprogramozási API-k az SGML / XML szerkesztőkhöz vagy a dokumentumtárakhoz, és ezek az objektummodellek a dokumentumobjektum modellt is befolyásolták.

A HTML DOM tulajdonságai

Lássuk a dokumentumobjektumok tulajdonságait, amelyekhez hozzáférhet és módosíthatja a dokumentumobjektum.

DOM-Graph
  1. Ablak objektum: Az Ablakobjektum mindig a hierarchia tetején található.
  2. Dokumentum objektum: Amikor egy HTML dokumentumot betöltenek egy ablakba, dokumentumobjektummá válik.
  3. Űrlap objektum: Képviseli forma címkék.
  4. Link objektumok: Képviseli link címkék.
  5. Horgonyobjektumok: Képviseli egy href címkék.
  6. Űrlapvezérlő elemek: Az űrlapnak számos vezérlőeleme lehet, például szövegmezők, gombok, választógombok és jelölőnégyzetek stb.

Mód of Document Object :

  1. írja („string”): írja az adott karakterláncot a dokumentumra.
  2. getElementById (): a megadott id értékű elemet adja vissza.
  3. getElementsByName (): a megadott névértékű elemeket adja vissza.
  4. getElementsByTagName (): a megadott címke nevű elemeket adja vissza.
  5. getElementsByClassName (): a megadott osztálynévvel rendelkező összes elemet adja vissza.

HTML elemek keresése

Ha HTML-elemekhez szeretne hozzáférni JavaScript-el, akkor először meg kell találnia az elemeket.

Ennek két módja van:

  • HTML elemek megkeresése id alapján
  • HTML elemek megkeresése címke neve alapján
  • HTML elemek keresése osztálynév szerint

HTML elem megkeresése azonosító szerint

A HTML-elem megkeresése a DOM-ban a legegyszerűbb az elemazonosító használatával.

Példa

HTML elemek keresése címke neve alapján

Ez a példa megtalálja az id = ”main” elemet, majd megtalálja az összeset

elemek a „main” belsejében:

Ezzel véget értünk ennek a HTML DOM cikknek. Remélem, megértette a HTML DOM, a Document Object Model különféle aspektusait.

java mi az a példa

Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.

Van egy kérdésünk? Kérjük, említse meg a „HTML Images” blog megjegyzés rovatában, és mi kapcsolatba lépünk Önnel.