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:

  1. 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
  2. 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:

<table id=’tabulka1’>
   <tr id=’beta’>
      <td>Text1</td>
   </tr>
</table>
<table id=’tabulka2’>
   <tr id=’beta’>
      <td>Text2</td>
   </tr>
</table>

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í.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět