Slabikář JavaScriptu – základy objektu document

24. května 2002

•

Při programování klientských skriptů je zapotřebí vědět, jakým způsobem lze přistupovat k jednotlivým objektům a elementům na HTML stránce. Tedy těm, které jsou obsaženy v objektu „document“ skriptovacího modelu. Vedle toho popíši i nejdůležitější vlastnosti a metody samotného objektu „document“.

Objekt document reprezentuje aktuální dokument, který je zobrazen v prohlížeči. Je tedy rodičovským objektem (anglicky parent) pro množství prvků, jako jsou formuláře, hypertextové odkazy, tabulky a podobně. Rodičovským objektem samotného dokumentu je objekt window. Nejprve si popíšeme vlastnosti a metody samotného objektu document a potom přejdeme k popisu zanořování objektů.

Vybrané vlastnosti objektu document:

Obecné vlastnosti:
- Kromě následujících reprezentuje vlastnost objektu document také identifikátor, který odkazuje na kolekci vnořených objektů. Odkazem document.forms získáme kolekci všech formulářů v dokumentu, document.images kolekci všech obrázků (tag <img>) a podobně.
- bgColor – barva pozadí dokumentu, totéž jako <BODY BGCOLOR=“…“>; nelze měnit, pokud je nastaveno pomocí CSS (MSIE)
- fgColor – barva textu dokumentu, totéž jako <BODY TEXT=“…“>; nelze měnit, pokud je nastaveno pomocí CSS (MSIE)
- title – obsahuje titulek (<title>) příslušné stránky
- URL – obsahuje URL načteného dokumentu, shoduje se s vlastností location.href popsanou v předcházejícím dílu
Specifické vlastnosti (MSIE):
- parentWindow – vlastnost vrací referenci na rodičovský objekt window příslušného dokumentu. Pokud je například dokument načten do nového okna, získáte použitím této vlastnosti odkaz na toto okno a můžete s ním manipulovat pomocí vlastností a metod popsaných v článku Slabikář JavaScriptu – DOM, objekt Window
- readyState – tato vlastnost nabývá jedné ze čtyř hodnot v závislosti na stavu dokumentu:
  1. complete – zdrojový kód dokumentu byl kompletně natažen a je připraven pro spouštění skriptů, které s ním manipulují (Pouze v tom případě si můžete být úplně jisti, že váš pečlivě vyzkoušený JavaScript nebude produkovat chyby v důsledku svého spuštění před natažením celého HTML dokumentu, pokud je roven true.)
  2. interactive – zdrojový kód není kompletně natažen, ale natažená část je připravena pro použití skriptů
  3. loading – zdrojový kód je natahován (bez dalších podrobností)
  4. uninitialized – zdrojový kód není k dispozici – stav je většinou indikací stahování

Vybrané metody objektu document

write – metoda pro zápis textu, případně HTML elementů do těla dokumentu document.write („<b>Text</b>“)

execCommand – metoda MSIE, pomocí níž můžete formátovat již zobrazené části HTML dokumentu, případně vkládat nové elementy. Sytnaxe: Boolean = object.execCommand(command [, bool [, value]]) , kde object je buď dokument nebo objekt typu Text Range (objekt je opět specifický pro Internet Explorer a bude popsán později), command je jeden z příkazů (viz dále), bool False nebo True určuje, zda se má nebo nemá zobrazit dialog vyzývající k zadání možné hodnoty parametru value (viz dále) a value je hodnota parametru příkazu command, pokud je tento parametr k příkazu definován. Pokud zadáváte parametr value, musí být hodnota bool nastavena na false. V opačném případě se vždy zobrazí dialog pro explicitní zadání této hodnoty.

Příkazy a hodnoty parametru command:

BackColor nastavuje barvu pozadí zvoleného textu (rrggbb | název barvy)
Bold přidává element <B> kolem textu
Copy kopíruje zvolený text do clipboardu (schránky)
CreateBookmark přidává element <A NAME=“…“> kolem textu (Bookmark – řetězcová konstanta parametru Name)
CreateLink Přidává element <A HREF=“…“> kolem textu URL
Cut kopíruje zvolený text do schránky (clipboardu) a smaže jej z dokumentu
Delete smaže object
FontName nastaví font textu (Název fontu)
FontSize nastaví velikost fontu (Velikost fontu)
ForeColor nastaví barvu textu (#rrggbb | název barvy)
Indent odsadí object
InsertButton vloží element <BUTTON> (hodnota ID)
InsertFieldSet vloží element <FIELDSET> (hodnota ID)
InsertHorizontalRule vloží element <HR> (hodnota ID)
InsertIFrame vloží element <IFRAME> (hodnota SRC)
InsertInputButton vloží element <INPUT TYPE=“button“> (hodnota ID)
InsertInputCheckbox vloží element <INPUT TYPE=“checkbox“> (hodnota ID)
InsertInputFileUpload vloží element <INPUT TYPE=“FileUpload“> (hodnota ID)
InsertInputHidden vloží element <INPUT TYPE=“hidden“> (hodnota ID)
InsertInputPassword vloží element <INPUT TYPE=“password“> (hodnota ID)
InsertInputRadio vloží element <INPUT TYPE=“radio“> (hodnota ID)
InsertInputReset vloží element <INPUT TYPE=“reset“> (hodnota ID)
InsertInputSubmit vloží element <INPUT TYPE=“submit“> (hodnota ID)
InsertInputText vloží element <INPUT TYPE=“text“> (hodnota ID)
InsertMarquee vloží element <MARQUEE> (hodnota ID)
InsertOrderedList vloží element <OL> (hodnota ID)
InsertParagraph vloží element <P> (hodnota ID)
InsertSelectDropdown vloží element <SELECT TYPE=“dropdown“> (hodnota ID)
InsertSelectListbox vloží element <SELECT TYPE=“Listbox“> (hodnota ID)
InsertTextArea vloží element <TEXTAREA> (hodnota ID)
InsertUnorderedList vloží element <IL> (hodnota ID)
Italic přidává element <I> kolem textu
JustifyCenter vycentruje object
JustifyFull zarovná object do bloku
JustifyLeft zarovná object vlevo
JustifyRight zarovná object vpravo
OverWrite nastaví mód psaní na vkládání nebo přepisování (Boolean – true=přepisování, false=vkládání)
Paste vloží obsah stránky, může se vkládat pouze text kopírovaný příkazem Copy metodou execCommand.
PlayImage začne přehrávat dynamický obrázek (video, animovaný GIF atp.)
Refresh obnoví obsah dokumentu
RemoveFormat odstraní formátování z objektu
RemoveParaFormat odstraní všechny elementy <P> z objektu
SelectAll vybere text celého dokumentu
StopImage zastaví přehrávání všech dynamických obrázků
Underline přidává element <U> kolem textu
Unlink odstraní hypertextový odkaz z objektu
Unselect vymaže vybraný text z dokumentu

Příklad:
var sel=document.selection.createRange()
res=sel.execCommand(„CreateLink“, false, „http://www.interval.cz“)
Uvedený kód změní vybraný text na HTML stránce na odkaz na www.interval.cz.

Pro vytváření objektů je možné použít metody createElement nebo createStyleSheet, které však budou pro svou komplexnost popsány v některém z následujících dílů.

Jak přistupovat k objektům dokumentu

Podle standardů existuje v zásadě několik možností, jak identifikovat objekt (formulář, textové pole, řádek tabulky a podobně) a manipulovat s ním, tedy měnit jeho vlastnosti a volat jeho metody:

pomocí vlastnosti ID elementu
pomocí vlastnosti name elementu
odkazem na pořadové číslo v kolekci

Pokud chcete k některému elementu (ovládacímu prvku formuláře, HTML elementu…) přistupovat pomocí skritpu, je vhodné mu přiřadit hodnotu vlastnosti ID. Tato hodnota by měla být (ale nemusí, jak dále ukážeme) jednoznačná v celém dokumentu. Jednoznačně lze element identifikovat i podle vlastnosti name, kterou ale všechny elementy nemají. Takto označené elementy jsou vždy součástí obecné kolekce document.all (pro MSIE), respektive document.ids (pro Netscape). Pomocí těchto kolekcí je přístup k objektu nejjednodušší, protože při přístupu nezáleží na zanoření elementu v objektové hierarchii.

Pokud přiřadíme tabulce id=’tabulka1′, můžeme k ní přistupovat (v MSIE) jako document.all.tabulka1 nebo document.all[‚tabulka1‘]. Objekty, kterým není přiřazeno ID, jsou v kolekci all samozřejmě obsaženy také a jsou dostupné pomocí svého pořadového čísla v kolekci. Zvláště u kolekce all je však takový přístup naprosto nepoužitelný. Vyzkoušejte třeba alert(document.all[0].elementName). Uvidíte, že pořadové číslo 0 v kolekci má element <HTML>. Podobně jako kolekce all funguje i odkaz pomocí metody getElementById. (Například document.getElementById('tabulka1').) Co se stane, pokud ID v rámci dokumentu není jednoznačné? Pro další výklad uvažujme následující kód:

Odkaz na řádek tabulky document.all.beta je v tuto chvíli nejednoznačný. JavaScript tento odkaz chápe jako referenci na kolekci objektů se stejným ID. Jako v každé kolekci je možné přistupovat k těmto objektům jejich pořadovým číslem.

Příklad kódu, který podbarví „Text2“ modrou barvou a „Text1“ barvou červenou:
document.all.beta[1].style.backgroundColor=“blue“
document.all.tabulka1.rows(‚beta‘).style.backgroundColor=“red“

Všimněte si, že pokud nepřistupujete k řádku za pomoci kolekce all, ale prokousáváte se k němu přes hierarchii objektů, uvedená nejednoznačnost ID v rámci dokumentu nevadí. Cesta k objektu již jednoznačná je.

V příštím dílu se zaměříme na příklady práce s kolekcemi objektů a jejich praktické využití.