Úvod do JavaScriptu - DOM Jaroslav BURDYS 3IT
Dokument Object Model DOM v JavaScriptu
DOM - Úvod Jde o objektový model dokumentu sloužící jako API pro práci(vytváření/mazání/manipulaci/editaci) s jednotlivými prvky (elementy) dokumentu ve formátu některého ze značkovacích jazyků (typicky HTML, XHTML, XML aplikace…) prostřednictvím vybraného skriptovacího jazyka (typicky JavaScript, PHP, Phyton, Ruby …) Má podobu stromové struktury, kde jsou jednotlivé prvky/elementy dokumentu reprezentovány objekty s vlastními vlastnostmi a metodami, které umožňují manipulaci s těmito objekty a jako celek reprezentuje celý dokument. Při načtení stránky je prohlížečem v RAM vytvořena DOM reprezentace dokumentu, jednotlivé skriptovací jazyky tak mají přes DOM API dynamický přístup k jakékoli části dokumentu a mohou ho real-time zpracovávat. V době tzv. války webových prohlížečů velmi nekonzistentní až protichůdné implementace napříč prohlížeči => nutnost standardizace => 1998 W3C (World Wide Web Consortium) vydává DOM Level 1 (tzv. DOM 1) Všechny předchozí verze se souhrnně označují jako DOM Level 0 (DOM 0) Na nejnovější verzi DOM Level 4 (DOM 4) pracuje skupina WHATWG (zveřejněno 2014)
DOM vs BOM BOM - Browser Object Model Objektový model prohlížeče (resp. okna, ve kterém se dokument nachází). Poskytuje skriptovacím jazykům API pro manipulaci s oknem prohlížeče (na rozdíl od manipulace s obsahem dokumentu jak je to u DOM API) v podobě objektů jako: navigator history screen location console Rodičovským objektem pro všechny jmenované (jakýmsi root objektem/elementem, od kterého ostatní objekty dědí vlastnosti a metody) je v BOM objekt window (na rozdíl od DOM, kde je to objekt document ) Metody hlavních rodičovských („root“) objektů nemusí být v obou modelech při jejich volání plně kvalifikovány (tj. jméno hlavních objektů můžeme při volání jejich metod vynechat). Např: BOM: DOM: window.alert() lze pouze alert() document.getElementById() lze pouze getElementById() window.prompt() lze pouze prompt() document.createElement() lze pouze createElement() obdobně confirm(), console.log() apod. Na rozdíl od DOM není BOM standardizován
Dom anatomie Objekt document je tedy nejvyšší objekt, který zahrnuje (a funguje jako vstupní bod pro) celý náš dokument. Všechny objekty, metody a vlastnosti, s jejichž pomocí budeme s objektem pracovat, pocházejí právě z objektu document a přes tento objekt také ke všem ostatním objektům přistupujeme. Např: document.getElementById() //p-cí této metody získáme konkrétní element aktuálního dokumentu podle jeho id document.title //p-cí této vlastnosti načteme titulek aktuálního dokumentu
DOM Level 0 Některé pozůstatky ve W3C DOM z důvodů zpětné kompatibility, které se mohou hodit: Přístup k jednotlivým druhům elementů prostřednictvím vlastností dokumentu v podobě specializovaných polí jako: document.images //vrací všechny obrázky aktuálního dokumentu document.forms //vrací všechny formuláře aktuálního dokumentu document.links //vrací všechny externí odkazy akt. dokumentu document.anchors //vrací všechny interní odkazy akt. dokumentu Přístup k jednotlivým prvkům těchto polí: Prostřednictvím indexu (tj. dle pořadí v dokumentu) Prostřednictvím jejich pojmenování (tj. p-cí atributu: name = „nějakéJméno“)
DOM Level 0 - Ukázka <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html>
DOM Level 0 - Ukázka Získání obrázku matka.jpg: <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> Získání obrázku matka.jpg: var poleObr = document.images //vrací pole všech obrázků
DOM Level 0 - Ukázka Získání obrázku matka.jpg: <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> Získání obrázku matka.jpg: var poleObr = document.images //vrací pole všech obrázků
DOM Level 0 - Ukázka Získání obrázku matka.jpg: <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> Získání obrázku matka.jpg: var obrMatka = document.images[1]; //přístup přes index
DOM Level 0 - Ukázka Získání obrázku matka.jpg: <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> Získání obrázku matka.jpg: var obrMatka = document.images[1]; //přístup přes index
DOM Level 0 - Ukázka Získání obrázku matka.jpg: <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> Získání obrázku matka.jpg: var obrMatka = document.images[1]; //přístup přes index var obrMatka = document.images.Matka; //přístup přes jméno
DOM Level 0 - Ukázka Získání obrázku matka.jpg: <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> Získání obrázku matka.jpg: var obrMatka = document.images[1]; //přístup přes index var obrMatka = document.images.Matka; //přístup přes jméno
DOM Level 0 - Ukázka Získání obrázku matka.jpg: <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> Získání obrázku matka.jpg: var obrMatka = document.images[1]; //přístup přes index var obrMatka = document.images.Matka; //přístup přes jméno var obrMatka = document.Matka; //přístup přes jméno
DOM Level 1 První úroveň standardizace z roku 1998 -první a nejvýznamnější, jež dala podobu dnešnímu DOM API Jednotlivé prvky dokumentu normalizovala prostřednictvím tzv. uzlu – Node – jakéhosi obecného prvku, od kterého dědí vlastnosti a metody všechny ostatní části dokumentu (včetně dokumentu samotného – Document) => vše v dokumentu (včetně něj) je uzel Rozlišuje se několik typů uzlů jako: Document – dokument samotný (document), kořenový uzel celé stromové reprezentace všech uzlů dokumentu Element – jednotlivé elementy (h,p,div…), mohou být ve stromové struktuře dětmi jiných uzlů a některé z nich (kontejnerové elementy) mít své vlastní dětské uzle Attr – vlastnosti elementů, patří mezi tzv. listy (koncové uzly) stromové reprezentace => nemohou mít vlastní dětské uzle Text – textový obsah kontejnerových elementů, patří mezi tzv. listy => nemohou mít vlastní dětské uzle ProcessingInstruction – instrukce ke zpracování např. <?php … ?> Comment – komentáře … a další (pro skriptování stránek již méně podstatné uzly)
Node vs document vs html Představuje obecný prvek dokumentu => implementuje veškerou funkcionalitu (metody) a vlastnosti společné všem typům uzlů (Document,Element,Attr…) a ty je od něj dědí Jeden z typů uzlů odvozený od Node, od kterého dědí základní fukcionalitu (např. metodu appendChild() – viz dále) Existuje právě jediný objekt tohoto typu uzlu: document Nejvyšší (root) uzel stromové reprezentace všech uzlů aktuálního dokumentu v jeho DOM reprezentaci, jde vlastně o abstraktní uzel, který obsahuje všechny ostatní uzly dokumentu (včetně root elementu – typicky: HTML), ale neodpoví- dá žádné značce jazyka HTML (či jiného značkovacího jazyka, v němž je aktuální dokument zapsán) => ke všem ostatním uzlům přistupujeme právě přes objekt document.něco Nejvyšší (root) element stromové reprezentace elementů dokumentu zapsa- ném v HTML. V stromové reprezentaci uzlů DOM je to ale jen speciální uzel typu Element. Document Element HTML
Node vs document vs html Nejvyšší (root) element stromové reprezentace elementů dokumentu zapsa- ném v HTML. V stromové reprezentaci uzlů DOM je to jen speciální uzel typu Element. Označujeme ho jako element dokumentu Jakožto takový je obsažen v objektu dokument (je jeho dítětem) => přistupu- jeme k němu přes vlastnost objektu document: document.documentElement Document Element HTML
Node vs document vs html Jeden z typů uzlů odvozený od Node, od kterého dědí základní fukcionalitu (např. metodu appendChild() – viz dále) Existuje právě jediný objekt tohoto typu uzlu: document Nejvyšší (root) uzel stromové reprezentace všech uzlů aktuálního dokumentu v jeho DOM reprezentaci, jde vlastně o abstraktní uzel, který obsahuje všechny ostatní uzly dokumentu (včetně root elementu – typicky: HTML), ale neodpoví- dá žádné značce jazyka HTML (či jiného značkovacího jazyka, v němž je aktuální dokument zapsán) => ke všem ostatním uzlům přistupujeme právě přes objekt document.něco Každý dokument má právě jen jeden objekt document, jelikož obaluje všechny ostatní uzly dokumentu, přidává k metodám zděděným od Node své vlastní pro tvorbu dceřiných uzlů: document.createElement() Příklad: var mujDiv = document.createElement(„div“) Toto vrátí prázdný element div do proměnné mujDiv, tj. element existuje zatím jen v paměti a musíme ho zapsat do dokumentu připojením na konec dokumentu či k některému již existujícímu uzlu modelu DOM Document Element HTML
Node vs document vs html Představuje obecný prvek dokumentu => implementuje veškerou funkcionalitu (metody) a vlastnosti společné všem typům uzlů (Document,Element,Attr…) a ty je od něj dědí Např.metoda pro zapsání vytvořeného elementu do dokumentu node.appendChild(): document.appendChild(mujDiv) – zapíše v proměnné mujDiv vytvořený element (např.div) na konec dokumentu za poslední element dokumentu dokument.getElementById(„vlozSem“).appendChild(mujDiv) – zapíše v proměnné mujDiv vytvořený element do elementu s id „vlozSem“za jeho posledního potomka (vnořený dětský element). Tím můžeme přesněji určit místo v dokumentu, kam nový element vložit. Podobně: Dokument.mujFormular.appendChild(mujDiv) – zde přesné místo v dokumentu (resp. příslušný element dokumentu), kam má být nový element vložen, určujeme p-cí jména cílového elementu (tj. p-cí atributu name: <form name = “mujFormular”></form> Uzly typu Text a Attr jsou listy (koncové uzly) a jako takové nemohou mít potomky => nelze na nich tuto metodu volat Document Element HTML
Příklad vytvoření elementu <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> var mujDiv = document.createElement(„div“); document.kontakt.appendChild(mujDiv);
Příklad vytvoření elementu <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> var mujDiv = document.createElement(„div“); document.kontakt.appendChild(mujDiv);
Příklad vytvoření elementu <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> <div></div> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> var mujDiv = document.createElement(„div“); document.kontakt.appendChild(mujDiv); mujDiv.setAttribute(„name“, „foo“);
Příklad vytvoření elementu <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> <div name =„foo“></div> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> var mujDiv = document.createElement(„div“); document.kontakt.appendChild(mujDiv); mujDiv.setAttribute(„name“, „foo“); var mujOdkaz, href; mujOdkaz = document.createElement(„a“); href = document.createAttribute(„href“); href.nodeValue = „http://mojeStranky.cz“; mujOdkaz.setAttributeNode(href); var textOdkazu = document.createTextNode(„Mé“); mujOdkaz.appendChild(textOdkazu); document.appendChild(mujOdkaz);//toto vloží odkaz //až na konec dokumentu
Příklad vytvoření elementu <!DOCTYPE HTML> <html lang="cs"> <head> <meta charset=windows-1250" /> <title>DOM Level 0</title> </head> <body> <img src="sestra.jpg" name=“Sestra" /> <img src="matka.jpg" name=“Matka" /> <form src="" name="kontakt"> <a href="http://www.w3.org" name="w3">W3C</a> <div name =„foo“></div> <a href=„ http://mojeStranky.cz“>Mé</a> </form> <img src="otec.jpg" name=“Otec" /> </body> </html> var mujDiv = document.createElement(„div“); document.kontakt.appendChild(mujDiv); mujDiv.setAttribute(„name“, „foo“); var mujOdkaz, href; mujOdkaz = document.createElement(„a“); href = document.createAttribute(„href“); href.nodeValue = „http://mojeStranky.cz“; mujOdkaz.setAttributeNode(href); var textOdkazu = document.createTextNode(„Mé“); mujOdkaz.appendChild(textOdkazu); document.kontakt.appendChild(mujOdkaz); //toto vloží odkaz na konec elementu formuláře