HTML DOM: Ako používať objektový model dokumentu

Objekt Document predstavuje dokument, ktorý sa zobrazí v danom okne. Objekt Document má rôzne vlastnosti, ktoré odkazujú na ďalšie objekty, ktoré umožňujú prístup a úpravu obsahu dokumentu. V tomto článku si budeme rozumieť HTML DOM.

• Koncept HTML DOM
• Čo je to HTML DOM
• Čo HTML DOM NIE JE
• Odkiaľ pochádza DOM
• Vlastnosti HTML DOM
• Hľadanie prvkov HTML

Koncept HTML DOM

Spôsob prístupu a úpravy dokumentovaného obsahu sa nazýva Objektový model dokumentu alebo DOM. Objekty sú usporiadané v hierarchii. Táto hierarchická štruktúra sa vzťahuje na organizáciu objektov vo webovom dokumente.

• Objekt okna a mínus Začiatok hierarchie. Je to najvyšší prvok hierarchie objektov.
• Objekt dokumentu a mínus Každý dokument HTML, ktorý sa načíta do okna, sa stane objektom dokumentu. Dokument obsahuje obsah stránky.
• Objekt formulára a mínus Všetko, čo je súčasťou značiek ..., nastavuje objekt formulára.
• Ovládacie prvky formulára a mínus Objekt formulára obsahuje všetky prvky definované pre tento objekt, napríklad textové polia, tlačidlá, prepínače a začiarkavacie políčka.

Čo je to HTML DOM

Objektový model dokumentu je programovacie rozhranie API pre dokumenty. Samotný objektový model sa veľmi podobá štruktúre dokumentov, ktoré modeluje. Zvážte napríklad túto tabuľku prevzatú z dokumentu HTML:

 
 
 
Shady Grove
 
Liparské
 
 
 
Za riekou, Charlie
 
Dorian
 
    

Čo HTML DOM NIE JE

Táto časť je navrhnutá tak, aby poskytovala presnejšie pochopenie modelu objektu dokumentu tým, že ho odlíši od iných systémov, ktoré sa môžu zdať podobné.

Aj keď bol dokumentový model dokumentu silne ovplyvnený dynamickým HTML, na úrovni 1 neimplementuje všetky dynamické HTML. Konkrétne udalosti ešte nie sú definované. Úroveň 1 je navrhnutá tak, aby položila pevný základ pre tento druh funkčnosti poskytnutím robustného a flexibilného modelu samotného dokumentu.

Objektový model dokumentu nie je binárnou špecifikáciou. Programy Object Object Model napísané v rovnakom jazyku budú kompatibilné so zdrojovým kódom naprieč platformami, ale Object Object Model nedefinuje žiadnu formu binárnej interoperability.

Objektový model dokumentu nie je spôsob pretrvávania objektov do formátu XML alebo HTML. Namiesto určenia toho, ako môžu byť objekty reprezentované v XML, určuje Object Object Model spôsob, akým sú dokumenty XML a HTML reprezentované ako objekty, aby ich bolo možné použiť v objektovo orientovaných programoch.

Objektový model dokumentu nie je súborom dátových štruktúr, je to objektový model, ktorý špecifikuje rozhrania. Aj keď tento dokument obsahuje diagramy znázorňujúce vzťahy rodič / dieťa, jedná sa o logické vzťahy definované programovacími rozhraniami, nie o reprezentácie konkrétnych interných dátových štruktúr.

Objektový model dokumentu nedefinuje „skutočnú vnútornú sémantiku“ XML alebo HTML. Sémantiku týchto jazykov definujú samotné jazyky.

Object Object Model je programovací model navrhnutý tak, aby rešpektoval túto sémantiku. Objektový model dokumentu nemá žiadne dôsledky na spôsob písania dokumentov XML a HTML. V objektovom modeli dokumentu je možné znázorniť akýkoľvek dokument, ktorý je možné napísať v týchto jazykoch.

Objektový model dokumentu napriek svojmu názvu nie je konkurenciou pre komponentový objektový model (COM). COM, podobne ako CORBA, je jazykovo nezávislý spôsob určovania rozhraní a objektov. Objektový model dokumentu je sada rozhraní a objektov určených na správu dokumentov HTML a XML. DOM môže byťimplementované pomocou jazykovo nezávislých systémov ako COM alebo CORBA, môže byť implementované aj pomocou jazykovo špecifických väzieb, ako sú väzby Java alebo ECMAScript uvedené v tomto dokumente.

Odkiaľ prišiel objektový model dokumentu

Objektový model dokumentu vznikol ako špecifikácia, ktorá umožňovala prenos skriptov JavaScript a programov Java medzi webové prehliadače. Dynamické HTML bolo bezprostredným predchodcom Objektového modelu dokumentu a pôvodne sa o ňom uvažovalo zväčša z hľadiska prehľadávačov.

Keď sa však vytvorila pracovná skupina pre dokumentový objektový model, pripojili sa k nej aj dodávatelia v iných doménach, vrátane editorov HTML alebo XML a archívov dokumentov. Niekoľko z týchto dodávateľov spolupracovalo so spoločnosťou SGML predtým, ako sa vďaka tomu vyvinul formát XML. Objektový model dokumentu bol ovplyvnený programom SGML Groves a štandardom HyTime. Niektorí z týchto dodávateľov tiež vyvinuli svoje vlastné objektové modely dokumentov, aby ich mohli poskytnúťprogramovacie rozhrania API pre editorov SGML / XML alebo archívy dokumentov a tieto objektové modely tiež ovplyvnili objektový model dokumentu.

Vlastnosti HTML DOM

Pozrime sa na vlastnosti objektov dokumentu, ku ktorým je možné pristupovať a upravovať ich.

1. Objekt okna: Objekt okna je vždy na vrchole hierarchie.
2. Objekt dokumentu: Keď sa dokument HTML načíta do okna, stane sa objektom dokumentu.
3. Objekt formulára: Zastupuje ju formulár značky.
4. Prepojiť objekty: Zastupuje ju odkaz značky.
5. Kotviace objekty: Zastupuje ju href značky.
6. Prvky kontroly formulára: Formulár môže mať veľa ovládacích prvkov, ako sú textové polia, tlačidlá, prepínače a začiarkavacie políčka atď.

Metódy objektu dokumentu :

1. write (“string”): zapíše daný reťazec na dokument.
2. getElementById (): vráti prvok, ktorý má danú hodnotu id.
3. getElementsByName (): vráti všetky prvky, ktoré majú danú hodnotu názvu.
4. getElementsByTagName (): vráti všetky prvky, ktoré majú daný názov značky.
5. getElementsByClassName (): vráti všetky prvky, ktoré majú daný názov triedy.

Hľadanie prvkov HTML

Ak chcete získať prístup k prvkom HTML pomocou JavaScriptu, musíte tieto prvky najskôr nájsť.

Existuje niekoľko spôsobov, ako to urobiť:

na reťazcovú metódu v jave

• Hľadanie prvkov HTML podľa id
• Vyhľadanie prvkov HTML podľa názvu značky
• Vyhľadanie prvkov HTML podľa názvu triedy

Hľadanie prvku HTML podľa id

Najjednoduchší spôsob, ako nájsť prvok HTML v DOM, je použitie prvku id.

Príklad

Hľadanie prvkov HTML podľa názvu značky

Tento príklad vyhľadá prvok s id = ”main” a potom nájde všetky

prvky vo vnútri „hlavnej“:

Týmto sa dostávame na koniec tohto článku HTML DOM. Dúfam, že ste pochopili rôzne aspekty HTML DOM, objektového modelu dokumentu.

Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie umožňuje získať zručnosti na prácu s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás otázku? Uveďte to v sekcii komentárov v blogu „HTML Images“ a my sa vám ozveme.