Přihlásit se

DOM – objektový model dokumentu III.

20. února 2002
Mozilla 1.0.0 v dubnu SDÍLET NA FACEBOOKU TWEETNOUT
Dnes se budeme věnovat dalším DOM vlastnostem a metodám pro procházení a čtení dokumentu. Na konci tohoto dílu je pro vás připravena přehledná tabulka shrnující vše, co bylo do této chvíle představeno.

V minulém dílu jsme se věnovali základům používání DOM v jazyce JavaScript a ukázali si některé vlastnosti a metody, pomocí kterých je možné procházet dokument a zjišťovat vlastnosti a obsah jednotlivých uzlů. Dnes si představíme ostatní vlastnosti a metody pro procházení a čtení. Všechny vlastnosti a metody určené pro procházení a čtení si na závěr shrneme do přehledné tabulky.

Oproti minulému (poněkud podrobněji vysvětlujícímu) dílu bude ten dnešní více přehledový. Předpokládám, že principy jsou vám snad již jasné a proto se můžeme zaměřit na "rozšíření obzorů". Stále se budeme zabývat procházením dokumentu a zjišťováním vlastností uzlů dokumentu. Jako jemný úvod k dalším dílům si ukážeme, které vlastnosti lze použít i pro změnu či nastavení jejich hodnot.

Metody a vlastnosti jsem rozdělil do 3 částí. Do první části spadají ty DOM metody a vlastnosti, které lze bez problémů použít v dnešních moderních prohlížečích (IE5, IE6, Mozilla, resp. NN6 a Konqueror, bez ohledu na Operu, která obsahuje jen skromnou implementaci DOM) a jsou součástí standardu DOM Level 1 Core a DOM Level 1 HTML. Další část obsahuje metody a vlastnosti, které jsou součástí standardu DOM Level 1 Core, ale zejména kvůli nedostatečné (či různým způsobem podmíněné) podpoře v prohlížeči Internet Explorer 5 či 5.5 se na ně dnes ještě není možné úplně spolehnout (IE 5 a 5.5 je dnes dosti rozšířen, takže při tvorbě stránek jsou jeho možnosti a limity určující). Konečně třetí část obsahuje nestandardní rozšíření od Microsoftu, plně podporované pouze v Internet Exploreru.

Metody a vlastnosti představené v minulém dílu jsou uvedeny pouze pokud existují další možnosti jejich použití, které nebyly uvedeny minule.

Standardní a univerzálně použitelné vlastnosti a metody

documentElement

Tato vlastnost vrací kořenový (root) element dokumentu. Používá se s objektem document. Kořenovým elementem je v případě html dokumentu tag <html>, v případě xml dokumentu může být kořenový element libovolného názvu. Všechny elementy (kromě něj samotného) jsou jeho potomky (descendants).

Syntaxe:

var koren = document.documentElement;

getElementsByTagName()

Tuto metodu jsme si představili už minule, dnes tedy uveďme pouze další možnost, kterou nám tato metoda nabízí. Výraz document.getElementsByTagName("*") vrátí pole všech elementů v dokumentu, jak jdou za sebou. (pozor ovšem na zvláštní chování Internet Exploreru 6, který vrací i objekty typu Comment, IE 5 a 5.5 tuto možnost pak nepodporují vůbec).

parentNode

Tato vlastnost vrací rodičovský objekt daného objektu.Vlastnost lze použít u všech typů objektů, které mohou mít rodiče. Z běžných typů objektů tedy nelze použít u objektu document a u objektu typu attr (atribut). Důvod je ten, že objekt document žádného rodiče nemá, jelikož reprezentuje celý dokument a tím pádem jsou všechny ostatní objekty jeho potomky (i kořenový element dokumentu má za rodiče právě objekt document), a objekt typu attr není brán jako součást hlavního stromu DOM objektů.

Na ostatní běžně používané typy objektů (element, text, comment) tuto vlastnost použít lze.

Syntaxe:

var rodic = nejaky_objekt.parentNode;

nextSibling

Vlastnost nextSibling vrací následujícího sourozence aktuálního objektu, pokud takový existuje, jinak vrací null. Lze použít u stejných typů objektů, jako vlastnost parentNode. Opět tedy nezkoušejte tuto vlastnost hlavně u atributů a objektu document.

Syntaxe:

var dalsi = nejaky_objekt.nextSibling;

previousSibling

Analogicky k předchozí vlastnosti vrací previousSibling předchozího sourozence aktuálního objektu, pokud existuje. Jinak pro tuto vlastnost platí totéž, jako pro nextSibling.

Syntaxe:

var predchozi = nejaky_objekt.previousSibling;

lastChild

Vlastnost lastChild vrací poslední dítě daného objektu. Analogie k vlastnosti firstChild, kterou jsme měli možnost poznat už minule.

Syntaxe:

var poslední_dite = nejaky_element.lastChild;

childNodes[]

Vlastnost childNodes vrací pole všech objektů (nodelist), které jsou dětmi daného objektu.

Syntaxe:

var druhé_dite = nejaky_element.childNodes[1];

nodeName

Vastnost nodeName vrací jméno objektu. V případě, že objekt není typu Element nebo Attr, vrací typ objektu s prefixem # (např. #comment, #text).

Syntaxe:

var jmeno = nejaky_objekt.nodeName;

nodeValue

O vlastnosti nodeValue byla řeč v minulém dílu. Kromě získání hodnoty jí lze využít i k nastavení hodnoty atributu, nebo textového objektu.

Nastavení:

text_atr_objekt.nodeValue = "center";

data

Vlastnost data je ekvivalentem vlastnosti nodeValue, představené v minulém díle. S její pomocí lze získat textový obsah objektu. Na rozdíl od nodeValue však lze vlastnost data použít pouze pro objekt typu Text, nikoliv už pro objekt typu Attr. Lze i nastavit obsah textu.

Syntaxe:

var text = textovy_objekt.data;

Nastavení:

textovy_objekt.data = "nějaké zajímavé sdělení :-)";

className

Vlastnost className vrací hodnotu atributu class. Tato vlastnost je použitelná pouze pro HTML dokumenty (je součástí standardu DOM Level 1 HTML). Kromě Opery ji lze ve všech ostatních prohlížečích i nastavit.

Syntaxe:

var jmeno_tridy = html_element.className;

Nastavení:

html_element.className = "upozorneni";

id

Vlastnost id vrací (zcela v souladu se svým názvem) hodnotu atributu id objektu, který musí být typu element. Pouze u HTML dokumentů. Lze použít i pro nastavení hodnoty.

Syntaxe:

var hodnota_id = html_element.id;

Nastavení:

html_element.id = "leve_menu";

title

Vlastnost title vrací hodnotu atributu title daného elementu, pokud je tento atribut definován. Pouze u HTML dokumentů. Lze použít i pro nastavení.

Syntaxe:

var hodnota_title = html_element.title;

Nastavení:

html_element.title = "leve_menu";

item()

Pro použití v JavaScriptu v podstatě nadbytečná metoda. Např.:

Document.getElementsByTagName("p").item(0);

Vrací tentýž výsledek jako:

Document.getElementsByTagName("p")[0];

Jak vidíte, metoda vrací určitou položku pole objektů (nodelist) specifikovanou indexem.

 
Standardní, ale "problematické" vlastnosti a metody

attributes[]

Vlastnost attributes je sice podporována ve všech moderních prohlížečích kromě Opery, ale problémem je rozdílná interpretace této vlastnosti. V Internet Exploreru tato vlastnost vrací pole objektů, které reprezentují veškeré možné atributy, které může daný element mít, bez ohledu na to, jestli nějaké atributy daný konkrétní element má, nebo nikoliv. Naopak v Mozille a Konqueroru vrací pole atributů, které jsou u daného elementu přítomny, přesně tak, jak jdou za sebou. V Mozille je možné k použít jako index i název elementu (jinak se používá číslo odpovídající pořadí, číslováno klasicky od nuly). Vlastnost attributes vždy vrací pole objektů, nikoliv hodnot.

Syntaxe:

var druhy_atribut = html_element.attributes[1];

nodeType

Vlastnost nodeType vrací číslo (konstantu), které odpovídá typu uzlu (objektu). Můžeme tak zjistit, je-li daný objekt element, atribut, text, komentář, atd. Menší problém je v Internet Exploreru verze 5.0, který neumí vrátit hodnotu, je-li daný objekt typu Attr (atribut). Chyba byla opravena v IE 5.5.

Syntaxe:

var typ = nejaky_objekt.nodeType;

Konstanty pro nejdůležitější typy objektů jsou tyto:

element = 1,
atribut = 2,
text = 3,
komentář = 8;

name

Vlastnost name se používá u objektů typu Attr (atributů) a vrací jméno atributu. Ovšem IE 5 a 5.5 neumožňuje tuto vlastnost použít u HTML dokumentů, ale pouze v XML dokumentech. Od IE 6 pracuje správně i v HTML.

Syntaxe:

var jmeno = nejaky_atribut.name;

value

Vlastnost value je "sestřičkou" předchozí vlastnosti name, používá se také u objektů typu Attr a vrací pro změnu hodnotu daného atributu. Problém v Internet Exploreru před verzí 6 je úplně stejný jako u vlastnosti name.

Syntaxe:

var hodnota = nejaky_atribut.value;

substringData()

Metoda substringData umožňuje "vytáhnout" část textového řetězce z textového obsahu objektu typu Text. Jako parametr se předává počáteční pozice a požadovaná délka "subřetězce", obojí jako počet znaků. Pozice je číslována od nuly, takže substringData(8, 6) vrátí řetězec o délce 6 znaků počínaje od 9.znaku v textovém obsahu. Tuto metodu neumí IE 5.

Syntaxe:

var retezec = textovy_objekt.substringData (8,6);

 

Nestandardní rozšíření DOM od Microsoftu

innerHTML

Vlastnost innerHTML vrací veškerý vnořený obsah elementu včetně HTML tagů, atributů, textu, komentářů atd. (defacto tedy všechny potomky daného elementu) jako jeden textový řetězec. Přestože se jedná o nestandardní rozšíření firmy Microsoft, tato vlastnost je podporována i Mozille a Konqueroru. Lze ji využít i k nastavení obsahu elementu analogickým způsobem. Všimněte si, že tato vlastnost (a koneckonců všechny další nestandardní rozšíření Microsoftu v této části) má trochu jinou logiku, než standardní DOM vlastnosti a metody - na vstupu i výstupu se zde pracuje s textovým řetězcem, který odpovídá třeba celému "větvení" DOM objektů, nikoliv tedy s objekty samotnými, ale textovou reprezentací, která má podobu "fragmentu" HTML kódu.

Syntaxe:

var retezec = html_element.innerHTML;

Nastavení:

html_element.innerHTML = "nějaký text <b>tučný text</b> a ještě další text";

innerText

Tuto vlastnost jsme si představili v minulém dílu. Jen upozorňuji, že tato vlastnost pracuje s veškerým textovým obsahem daného elementu, tedy včetně textového obsahu všech vnořených elementů, jako s jedním řetězcem. Kromě čtení textového obsahu elementu lze použít i k nastavení.

Nastavení:

html_element.innerText = "nějaký text";

outerHTML

Vlastnost outerHTML vrací v principu totéž, jako innerHTML, pouze s tím rozdílem, že zahrnuje i samotný daný element a jeho atributy. Na rozdíl od innerHTML se je tato vlastnost podporována pouze v Internet Exploreru. Opět lze použít i pro nastavení - poté však zadaný textový řetězec přepíše i samotný HTML tag a jeho atributy, nikoliv jen vnořený obsah.

Syntaxe:

var retezec = html_element.outerHTML;

Nastavení:

html_element.outerHTML = "nějaký text <b>tučný text</b> a ještě další text";

outerText

Pro čtení vrací tato vlastnost totéž jako innerText. Při použití pro nové nastavení však bude příslušným textem nahrazen i samotný element.

Nastavení:

html_element.outerText = "nějaký text";

children[]

Tato vlastnost vrací pole těch dětí příslušného elementu, které jsou zároveň HTML elementy.

Syntaxe:

var druhy_html_element = html_element.children[1];

Přehledná tabulka DOM metod a vlastností pro procházení a čtení

Následující tabulka vám poskytne souhrnnou informaci o všech vlastnostech a metodách pro procházení a čtení přehlednou formou. Metody a vlastnosti jsou rozděleny dle stejného členění jako v předchozím textu. Zelenou barvou je vyznačena plná podpora dané metody či vlastnosti v prohlížeči, červenou barvu naopak chybějící podpora. Žlutá barva značí částečnou nebo podmíněnou podporu. Jako podklad pro tuto tabulku posloužila výborně zpracovaná W3C DOM Compatibility Table od Peter-Paul Kocha.

Tabulka DOM metod a vlastností pro procházení a čtení

vlastnost nebo metoda: součást DOM: IE 5, 5.5 IE 6 Mozilla/NN6 Konqueror 2.2 Opera 5, 6 poznámky
Standardní a univerzálně použitelné metody a vlastnosti
documentElement L1 Core ANO ANO ANO ANO NE  
getElementById(hodnota) L1 HTML, L2 Core ANO ANO ANO ANO ANO  
getElementsByTagName(jméno) L1 Core ANO ANO ANO ANO ANO  
getAttribute(jméno) L1 Core ANO ANO ANO ANO ANO  
parentNode L1 Core ANO ANO ANO ANO ANO  
nextSibling L1 Core ANO ANO ANO ANO NE  
previousSibling L1 Core ANO ANO ANO ANO NE  
firstChild L1 Core ANO ANO ANO ANO NE  
lastChild L1 Core ANO ANO ANO ANO NE  
childNodes[] L1 Core ANO ANO ANO ANO NE  
nodeName L1 Core ANO ANO ANO ANO NE  
nodeValue L1 Core ANO ANO ANO ANO NE i nastavení
data L1 Core ANO ANO ANO ANO NE i nastavení
tagName L1 Core ANO ANO ANO ANO ANO  
className L1 HTML ANO ANO ANO ANO jen čtení i nastavení
id L1 HTML ANO ANO ANO ANO ANO i nastavení
title L1 HTML ANO ANO ANO ANO ANO i nastavení
item(index) L1 Core ANO ANO ANO ANO ANO  
Standardní, ale "problematické" vlastnosti a metody
attributes[] L1 Core ANO ANO ANO ANO NE různá interpretace!
nodeType L1 Core chyba v IE5 ANO ANO ANO NE  
name L1 Core jen v XML ANO ANO ANO NE  
value L1 Core jen v XML ANO ANO ANO NE  
getAttributeNode(jméno) L1 Core NE ANO ANO ANO NE  
substringData(poč. posice, délka) L1 Core NE ANO ANO ANO NE  
Nestandardní rozšíření od Microsoftu
innerHTML MS ANO ANO ANO ANO NE i nastavení
innerText MS ANO ANO NE jen nastavení NE i nastavení
outerHTML MS ANO ANO NE NE NE i nastavení
outerText MS ANO ANO NE NE NE i nastavení
children[] MS ANO ANO NE NE NE  

Tím pro dnešek skončíme. V dnešním dílu se neobjevil žádný "pořádný" příklad - proto vám slibuji nápravu a příště si ukážeme a rozebereme poměrně rozsáhlý, ale názorný a užitečný skript, kde použijeme většinu dnes probíraných vlastností a metod a díky kterému budete moci procházet libovolný dokument a zjišťovat všechny možné vlastnosti objektů.

Váš názor › Další článek: Mozilla 1.0.0 v dubnu

Témata článku: Software, Internet, Programování, Internet Explorer, Opera, Dnešní standard, DOM, Syntax, Požadovaná délka, HTML, Dok, Dóm, Libovolný dokument, Item, Doma, Textový řetězec, Element, Model S, OBJ, Model, Textové pole, Nastavení, Core, Objekt, Stejný princip, Software na Heureka.cz




O webu