DOM - Document Object Model

Obsah:

Co to jsou objekty

JavaScript je objektově orientovaným programovacím jazykem (OOP), což znamená, že využívá objektového modelu (DOM - Document Object Model). Základním objektem je window (okno). Jeho podobjekty jsou např. document (html stránka), navigator (internetový prohlížeč), history (historie navštívených stránek) a další. Podobjekty objektu document jsou kolekce jednotlivých prvků html stránky, tj. kolekce obrázků (images), odkazů (links), formulářů (forms) a kotev - pojmenovaných míst dokumentu (anchors). Podobjekty těchto kolekcí jsou jednotlivé prvky html stránky.

window
- navigator
- history
- document
  - images
  - links
  - forms
  - anchors

poznámka

Kolekce všech objektů dokumentu (all) je zavedena jen v některých prohlížečích a nedoporučuje se tedy používat.

Konkrétní prvek html stránky můžeme určit pomocí jeho:

id
name
pořadového čísla

Kdy použít name a kdy id

V dokumentu může být více objektů se shodným name, např. přepínače ve formuláři musí mít stejné name. Naproti tomu id musí být jednoznačné.

Pro zpracování dat odeslaného formuláře musí mít všechna pole formuláře určeno name. U formulářů tedy využijeme name, u ostatních html elementů se doporučuje používat jednoznačné id.

Specifikace objektu prostřednictvím DOM

Např. obrázek, jehož id je pyramida (<img id="pyramida" src="foto01.jpg" width="100" height="25" alt="Obrázek">), je objekt:
window.document.images.pyramida
Objekt window, jakožto hlavní objekt, můžeme v zápise vynechat:
document.images.pyramida

Formulář, jehož name je registrace, je objekt:
document.forms.registrace

Tlačítko, jehož name je tlacitko a které je ve formuláři registrace, je objekt:
document.forms.registrace.tlacitko

Má-li více objektů v dokumentu stejné name, specifikujeme je pomocí pořadového čísla:
document.forms.osobniUdaje.pohlavi[0] document.forms.osobniUdaje.pohlavi[1]

Na kolekce objektů se můžeme dívat také jako na pole a použít pořadové číslo objektu (čísluje se od 0). V tom případě objekt nemusí mít ani id ani name:

document.images[0]          // první obrázek v dokumentu
document.images[1]          // druhý obrázek v dokumentu
document.forms[1]           // druhý formulář v dokumentu
document.forms[1][2]        // třetí prvek druhého formuláře v dokumentu

Specifikace objektu prostřednictvím metod get

Na objekty dokumentu (včetně těch, které nejsou součástí výše zmíněných kolekcí, např. h1, div apod.) se můžeme také odkazovat pomocí metod:

document.getElementById("id_prvku"), která vrací objekt s daným id:
document.getElementById("pyramida")
document.getElementsByName("name_prvku"), která vrací pole objektů dokumentu, jež mají zadané name - na konkrétní objekt se pak odkazujeme pomocí indexu:
(I když budeme mít v dokumentu jediný element s daným name, přesto musíme uvést index [0] pro první prvek pole.)
document.getElementsByName("tlacitko")[0]
document.getElementsByTagName("tag_prvku"), která vrací pole zadaného typu objektů (html tag)- na konkrétní objekt se pak odkazujeme pomocí indexu:
document.getElementsByTagName("h1")[0]