DOM - Objektový model dokumentu 11.

V závěrečném dílu seriálu o W3C DOM a jeho praktickém použití v jazyce Javascript si posbíráme střípky, které se nám nevešly do minulých dílů, ale mohou se nám při práci hodit. Na závěr uvedeme několik odkazů na hodnotné zdroje o DOM.
Vytvoření fragmentu

Norma DOM definuje už ve své první verzi (DOM Level 1 Core) rozhraní s názvem DocumentFragment. O co se vlastně jedná a k čemu to lze prakticky využít?

Objekt typu DocumentFragment použijeme tehdy, když potřebujeme do dokumentu vložit sadu uzlů (elementů, textových uzlů, komentářů, atd…), které nechceme při vytvoření uzavírat do „rodičovského“ elementu. Mějme například kostru HTML dokumentu, s prázdným elementem <BODY>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Prázdný HTML dokument</title>
</head>
<body></body>
</html>

V sekci HEAD můžeme samozřejmě mít meta-tagy, styly či skripty (jejichž prostřednictvím budeme třeba přidávat uzly do dokumentu :-), v našem příkladu je důležitý prázdný element <BODY>. Naším úkolem bude pomocí DOM dosáhnout následující podoby dokumentu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Prázdný HTML dokument</title>
</head>
<body>
  <h1>Nadpis první úrovně</h1>
  <p>První odstavec.....</p>
  <h2>Nadpis druhé úrovně</h2>
  <p>Druhý odstavec</p>
  <hr/>
  ...nějaký text...
</body>
</html>

Z minulých dílů již dobře víme, jak toho docílit. Nyní ovšem budeme chtít celý nově vytvořený obsah elementu <BODY> přidat najednou, nikoliv po jednotlivých elementech. Náhle stojíme před problémem, jak toho docílit, když nepřidáváme jediný element (který může mít libovolný počet dětí či potomků), ale několik sourozenců. Možná vás napadne udělat to vložením všech nových uzlů do nějakého vhodného dalšího rodičovského elementu bez obsahu, např. <DIV>, což je jistě proveditelné, ale nikoliv řešení daného problému.

Řešením je právě objekt typu DocumentFragment. Lze ho vytvořit pomocí metody createDocumentFragment() objektu document.

var fragment = document.createDocumentFragment();

Do tohoto objektu nyní můžete vkládat děti (elementy, textové uzly, atd.) jako kdyby se jednalo o objekt typu Element. Poté můžeme tento objekt vložit do dokumentu a výsledkem bude, že v dokumentu se objeví pouze děti (či potomci) tohoto fragmentu. Podívejte se na příklad. Zde je zdrojový kód funkce cDF(), která je spouštěná při události onLoad (načtení stránky do prohlížeče) v tomto příkladu. Bohužel, rozhraní DocumentFragment nepracuje v IE 5 a 5.5 (až od IE 6).

function cDF() {
    var frag = document.createDocumentFragment();
   
    var h1 = document.createElement(`h1`);
    var p_1 = document.createElement(`p`);
    var h2 = document.createElement(`h2`);
    var p_2 = document.createElement(`p`);
    var hr = document.createElement(`hr`);

    var txt_h1 = document.createTextNode(`Nadpis první úrovně`);
    var txt_p_1 = document.createTextNode(`První odstavec.....`);
    var txt_h2 = document.createTextNode(`Nadpis druhé úrovně`);
    var txt_p_2 = document.createTextNode(`Druhý odstavec.....`);
    var txt = document.createTextNode(`...nějaký text...`);
   
    h1.appendChild(txt_h1);
    p_1.appendChild(txt_p_1);
    h2.appendChild(txt_h2);
    p_2.appendChild(txt_p_2);
   
    frag.appendChild(h1);
    frag.appendChild(p_1);
    frag.appendChild(h2);
    frag.appendChild(p_2);
    frag.appendChild(hr);
    frag.appendChild(txt);
   
    document.body.appendChild(frag);
    }

ownerDocument

Vlastnost ownerDocument lze aplikovat na jakýkoliv uzel a vrací objekt dokumentu, ze kterého daný objekt pochází. V běžné praxi (tj. při manipulaci v rámci jednoho dokumentu) asi vcelku zbytečná vlastnost, využití ale najde například tehdy, pokud se pracuje s více HTML/XML dokumenty najednou (např v rámech) a je potřeba identifikovat, kam který nod patří. Nefunguje v IE 5 a 5.5 (tj. také až od IE 6).

var doc = objekt.ownerDocument; //výsledkem vlastnosti je objekt typu Document
doc.createElement(‘div’);// ...např. – v zásadě stejné jako document.createElement(‘div’);

hasChildNodes()

Metoda hasChildNodes() vrací hodnotu true, pokud daný objekt, u kterého je použita, má děti, nebo false, pokud nikoliv.

var element = document.getElementById(“nejake_id”);
  if(element.hasChildNodes()) {
    var text = `element má `+element.childNodes.length+` dětí`;
    alert(text);
  } else {
    alert(`element nemá žádné děti`);
  }

Tato metoda má podporu od IE 5, takže ji můžete ve svých DOM skriptech bez problémů používat.

specified

Vlastnost specified vrací hodnotu true, pokud je daný atribut specifikován (nastaven), nebo false, pokud nikoliv. Používá se ve spojení s objektem typu Attr (atribut). Ukázka použití:

var element = document.getElementById(“nejake_id”);
var attrs = element.attributes;
  for(i=0; i<attrs.length; i++) {
    if(attrs[i].specified)  {
      alert(‘atribut ‘+attrs[i].name+’ má hodnotu ‘+attrs[i].value);
}
}

Na závěr této části si dnešní metody a vlastnosti uspořádejme do poslední přehledné tabulky.

vlastnost nebo metoda: součást DOM: IE 5, 5.5 IE 6 Mozilla/NN6 Konqueror 2.2 Opera 5, 6 poznámky
ownerDocument L1 Core NE ANO ANO ANO NE  
hasChildNodes() L1 Core ANO ANO ANO ANO NE  
specified L1 Core ANO ANO ANO ANO NE  
createDocumentFragment() L1 Core NE ANO ANO NE NE  

Zdroje informací o DOM

Tím tento seriál končí. Jistě by se v rámci problematiky Objektového modelu dokumentu našla další zajímavá témata, která by stála za rozbor – ovšem pro čtenáře, který dočetl až sem, jistě nebude problém získávat informace z dalších zdrojů. Pokusím se nyní zrekapitulovat a upozornit na ta nejdůležitější místa v síti, kde byste měli nalézt vše, co o DOM potřebujete vědět.

„Biblí“ DOM jsou samotné normy na webu W3C. V současné době lze poměrně bez velkých potíží počítat v prohlížečích s podporou normy DOM Level 1 Core a DOM Level 1 HTML . Pár slov o normě DOM Level 1 HTML – ta byla vytvořena kvůli definici specifičtějších rozhraní v rámci HTML dokumentu a také kvůli ošetření zpětné kompatibility a návaznosti na starší, nestandardizované objektové modely v prohlížečích. V našem seriálu jsme se jí nezabývali komplexně, podrobněji jsme se zmínili hlavně o práci s tabulkami (která je asi jedním z nejdůležitějších novinek oproti starším objektovým modelům). Norma definuje příslušná rozhraní odpovídající jednotlivým elementům v normě HTML 4.0, vlastnosti odpovídající atributům HTML elementů a příslušné metody. V současných prohlížečích je velmi dobře implementována. Pokud umíte používat starší „DHTML Object Model“ v IE 4, nebude vám osvojení DOM Level 1 HTML dělat velké problémy.

Okrajově jsme se zmínili o některých vlastnostech a metodách normy DOM Level 2 a to části Style. Další části normy DOM Level 2 jsou šířeji (nikoliv ovšem úplně) implementovány v Mozille, která poskytuje jednoznačně neširší podporu DOM – některé pokročilé možnosti ale dnes ještě nelze používat (díky sporé podpoře ostatních prohlížečů) a ani v našem seriálu jsme se jimi podrobně nezabývali. Proto se jistě bude hodit referenční příručka implementace DOM v Mozille „Gecko DOM Reference“ (Gecko je označení renderovacího jádra Mozilly).

Microsoft Internet Explorer verze 5 a výše disponuje dobrou podporou DOM Level 1 (IE 6 by měl mít údajně kompletní podporu DOM Level 1), kromě toho lze využít velkého počtu nestandardních řešení. Kompletní přehled všech standardních i nestandardních vlastností a metod, které můžeme v IE používat, najdete na webu MSDN pod názvem DHTML References. Pouze o W3C DOM v rámci Internet Exploreru je pak tato stránka.

O vynikající stránce Peter-Paul Kocha jsem se již zmiňoval. Nejdůležitější částí je asi DOM Compatibility Table , která byla i podkladem pro sumarizující tabulky v našem seriálu. Referenční příručku DOM 1 Core a DOM 2 Core najdete na Zvon.org. Zajímavá je také tabulka porovnávající DOM v Netscape 6 (tj. defacto v Mozille) a v IE 5.5 na DevEdge.

Všechny zdroje jsou v anglickém jazyce – na českém internetu mi bohužel není znám žádný zdroj, který by takříkajíc „stál za řeč“ (lépe řečeno, až na pár zmínek či kratších pojednání tu v podstatě nic není…).

Tolik tedy o W3C DOM. Doufám, že tento seriál pomohl co možná největšímu počtu zájemců o tuto problematiku udělat si ucelenější představu a naučit se s DOM v Javascriptu prakticky pracovat.

Váš názor Další článek: Volný a Pandora v novém

Témata článku: Software, Microsoft, Programování, Internet Explorer, Objektový, IE 11, Počet dětí, Gecko, První odstavec, IE 10, Model, Alert, Fragment, Model S, Dok, Vytvořený obsah, Mode, Head, Bible, Dokument, Doma, Level, Objekt, HTML, Element


Určitě si přečtěte



Aktuální číslo časopisu Computer

Velký test Wi-Fi mesh

Nejlepší hodinky pro všechny aktivity

Důležité aplikace na cesty

Jak streamovat video na Twitch