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, Model S, Objektový, Dóm, Současný prohlížeč, Objekt, Alert, IE 10, Level, Fragment, Dokument, HR, DOM, Dok, Bible, Doma, Gecko, Nestandardní řešení, První odstavec, Red Alert, HTML, Vytvořený obsah


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

Windows 10 vylepšují správu aktualizací ovladačů hardwarových komponent počítače
Karel Kilián
OvladačeWindows UpdateWindows 10
Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

** Kde jsou ty doby, kdy měl skoro každý doma Photoshop ** Photoshop a Premiere Pro od kamaráda nebo z warezu ** Dnes už to nemá smysl, existuje totiž hromada laciných alternativ

Jakub Čížek | 92

Jakub Čížek
Grafický editorStřih videa
Vy a počítač: Virtuální plochy ve Windows mají smysl, používá je třetina čtenářů
Vladislav Kluska
Jak používáte počítačWindows 10Ankety
Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

** Vývoj COVID-19 v Česku: nakažení, úmrtí, testovaní, hospitalizovaní ** Mapa podle okresů, přehled podle věku, situace v Evropě i ve světě ** Každý den aktualizované grafy a mapy

Marek Lutonský | 172

Marek Lutonský
COVID-19Koronavirus
Nešťastný vývojář ukazuje, proč není dobré být závislý na Googlu
Lukáš Václavík
InternetGoogle
Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

** Chcete se teď hned naučit programovat čipy? ** Nechcete nic instalovat a číst zdlouhavé manuály? ** Naprogramujeme si Micro:bit, který zahraje Tichou noc

Jakub Čížek | 35

Jakub Čížek
Pojďme programovat elektronikuProgramování pro děti
Můžete mít dvakrát rychlejší VDSL? Mapa Cetinu ukazuje, kde je dostupný bonding
Lukáš Václavík
CETINPřipojení k internetu
Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

** Tranzistory současných počítačů vyzařují při přepínání teplo ** Na Tokijské univerzitě proto vyvíjejí adiabatické procesory ** Využívají supravodivost a jsou 80× úspornější

Jakub Čížek | 48

Jakub Čížek
TranzistoryProcesoryTechnologie

Aktuální číslo časopisu Computer

Megatest rychlých Wi-Fi 6 routerů

Jak ztišit počítač

Velký test mATX skříní