HTML DOM: Jak používat model objektu dokumentu

Objekt Document představuje dokument, který se zobrazí v daném okně. Objekt Document má různé vlastnosti, které odkazují na jiné objekty, které umožňují přístup a úpravu obsahu dokumentu. V tomto článku budeme rozumět HTML DOM.

• Koncept HTML DOM
• Co je HTML DOM
• Co HTML DOM NENÍ
• Odkud DOM přišel
• Vlastnosti HTML DOM
• Hledání prvků HTML

Koncept HTML DOM

Způsob přístupu a úpravy dokumentovaného obsahu se nazývá Model objektu dokumentu nebo DOM. Objekty jsou organizovány v hierarchii. Tato hierarchická struktura se vztahuje na organizaci objektů ve webovém dokumentu.

• Objekt okna a minus Začátek hierarchie. Je to nejvyšší prvek hierarchie objektů.
• Objekt dokumentu & minus Každý dokument HTML, který se načte do okna, se stane objektem dokumentu. Dokument obsahuje obsah stránky.
• Objekt formuláře a minus Všechno uzavřené ve značkách… nastavuje objekt formuláře.
• Ovládací prvky formuláře a minus Objekt formuláře obsahuje všechny prvky definované pro tento objekt, například textová pole, tlačítka, přepínače a zaškrtávací políčka.

Co je HTML DOM

Document Object Model je programovací API pro dokumenty. Samotný objektový model se velmi podobá struktuře dokumentů, které modeluje. Zvažte například tuto tabulku převzatou z dokumentu HTML:

 
 
 
Shady Grove
 
Liparské
 
 
 
Přes řeku, Charlie
 
Dorian
 
    

Co HTML DOM NENÍ

Tato část je navržena tak, aby poskytovala přesnější pochopení modelu objektu dokumentu tím, že jej odlišuje od jiných systémů, které se mohou zdát podobné.

Ačkoli byl objektový model dokumentu silně ovlivněn dynamickým HTML, na úrovni 1 neimplementuje všechny dynamické HTML. Zejména dosud nebyly definovány události. Úroveň 1 je navržena tak, aby položila pevný základ pro tento druh funkcí poskytnutím robustního a flexibilního modelu samotného dokumentu.

Objektový model dokumentu není binární specifikací. Programy Document Object Model napsané ve stejném jazyce budou kompatibilní se zdrojovým kódem napříč platformami, ale Object Object Model nedefinuje žádnou formu binární interoperability.

Objektový model dokumentu není způsob, jak přetrvávat objekty do XML nebo HTML. Místo určení způsobu, jakým mohou být objekty reprezentovány v XML, určuje Object Object Model, jak jsou dokumenty XML a HTML reprezentovány jako objekty, aby je bylo možné použít v objektově orientovaných programech.

Objektový model dokumentu není sada datových struktur, jedná se o objektový model, který určuje rozhraní. Ačkoli tento dokument obsahuje diagramy zobrazující vztahy rodič / dítě, jedná se o logické vztahy definované programovacími rozhraními, nikoli o reprezentace žádných konkrétních interních datových struktur.

Objektový model dokumentu nedefinuje „skutečnou vnitřní sémantiku“ XML nebo HTML. Sémantiku těchto jazyků definují samotné jazyky.

Document Object Model je programovací model navržený tak, aby respektoval tuto sémantiku. Objektový model dokumentu nemá žádné důsledky pro způsob psaní dokumentů XML a HTML, jakýkoli dokument, který lze napsat v těchto jazycích, může být zastoupen v objektovém modelu dokumentu.

Objektový model dokumentu, navzdory svému názvu, není konkurentem modelu COM (Component Object Model). COM, stejně jako CORBA, je jazykově nezávislý způsob určování rozhraní a objektů. Dokumentový model dokumentu je sada rozhraní a objektů určených pro správu dokumentů HTML a XML. DOM může býtimplementováno pomocí jazykově nezávislých systémů, jako je COM nebo CORBA, může být také implementováno pomocí jazykově specifických vazeb, jako jsou vazby Java nebo ECMAScript uvedené v tomto dokumentu.

Odkud přišel objektový model dokumentu

Objektový model dokumentu vznikl jako specifikace umožňující přenos skriptů JavaScript a programů Java mezi webové prohlížeče. Dynamické HTML bylo bezprostředním předchůdcem Object Object Model a původně se o něm uvažovalo převážně z hlediska prohlížečů.

Když však byla vytvořena pracovní skupina Document Object Model Working Group, připojili se k ní také prodejci v jiných doménách, včetně editorů HTML nebo XML a úložišť dokumentů. Několik z těchto dodavatelů spolupracovalo s SGML před tím, než se ve výsledku vyvinul XML, dokumentový model dokumentu byl ovlivněn SGML Groves a standardem HyTime. Někteří z těchto dodavatelů také vyvinuli své vlastní objektové modely pro dokumenty, aby je mohli poskytnoutprogramovací rozhraní API pro editory SGML / XML nebo úložiště dokumentů a tyto objektové modely také ovlivnily objektový model dokumentu.

Vlastnosti HTML DOM

Podívejme se na vlastnosti objektů dokumentu, ke kterým lze přistupovat a upravovat je pomocí objektu dokumentu.

1. Objekt okna: Objekt okna je vždy v horní části hierarchie.
2. Objekt dokumentu: Když se dokument HTML načte do okna, stane se z něj objekt dokumentu.
3. Objekt formuláře: Představuje to formulář značky.
4. Propojit objekty: Představuje to odkaz značky.
5. Kotevní objekty: Představuje to a href značky.
6. Ovládací prvky formuláře: Formulář může mít mnoho ovládacích prvků, jako jsou textová pole, tlačítka, přepínače a zaškrtávací políčka atd.

Metody objektu dokumentu :

1. write (“string”): zapíše daný řetězec na dokument.
2. getElementById (): vrací prvek, který má danou hodnotu id.
3. getElementsByName (): vrátí všechny prvky, které mají danou hodnotu názvu.
4. getElementsByTagName (): vrací všechny prvky s daným názvem tagu.
5. getElementsByClassName (): vrací všechny prvky, které mají daný název třídy.

Hledání prvků HTML

Chcete-li získat přístup k prvkům HTML pomocí JavaScriptu, musíte je nejprve najít.

Existuje několik způsobů, jak toho dosáhnout:

rozdíl mezi qtp a selenem

• Hledání prvků HTML podle id
• Hledání prvků HTML podle názvu značky
• Hledání prvků HTML podle názvu třídy

Hledání prvku HTML podle id

Nejjednodušší způsob, jak najít prvek HTML v modelu DOM, je použití ID prvku.

Příklad

Hledání prvků HTML podle názvu značky

Tento příklad najde prvek s id = ”main” a poté najde vše

prvky uvnitř „hlavní“:

Tím se dostáváme na konec tohoto článku HTML DOM. Doufám, že jste porozuměli různým aspektům HTML DOM, objektového modelu dokumentu.

Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů v blogu „HTML Images“ a my se vám ozveme.