Programujeme DHTML aplikace – obsah

Náplní dnešního dílu je manipulace s obsahem a strukturou dokumentu pomocí metod objektového modelu prohlížeče a jejich aplikace na jednoduchých úlohách.

Teď, když už umíme pracovat s elementy, respektive uzly, začneme dynamicky upravovat obsahovou složku dokumentu. Postupně budeme různými způsoby měnit jak textové informace, tak vytvářet, nahrazovat a mazat jednotlivé uzly či celé skupiny uzlů. Ostatně získání kompletní kontroly nad obsahem dokumentu je jedním z pilířů DHTML. Ti, co minule podrobněji studovali uváděné rozhraní, již vědí, že budeme používat další metody rozhraní Document a Node. Nemusíte se však obávat, není to vůbec nic složitého a později, když budeme vytvářet složitější aplikace, se vynaložené úsilí určitě vrátí. Nejprve připomenutí zápisu html_zápis_1, na němž budu demonstrovat některé metody.

 <div id=“div1″>
   <span id=“text1″> Hello world</span>
   <span id=“text2″> Hello world</span>
 </div>

Změna textu

Častou chybou začínajících programátorů je domněnka, že text, který je uzavřen v nějakém elementu, je jeho pseudoatributem a snaží se získat jeho hodnotu například přes vlastnost nodeValue příslušného elementu. Aplikováno na html_zapis_1 takto: muj_text = document.getElementById('text1').nodeValue. Je pravdou, že vlastnost nodeValue je „hodnota“ uzlu, avšak použití je odlišné. Především je nutné si uvědomit, že text jako takový je chápan jako nový a samostatný uzel typu Text. Tím, že jej uzavřeme mezi nějaké tagy, pouze určujeme budoucí místo v hierarchii uzlů. Proto se s textem pracuje jako s novým uzlem a v příkladu je tedy pouze prvním dítětem elementu span. A právě u uzlu typu Text má vlastnost nodeValue kýžený efekt.

Jelikož pracujeme s textem, budeme používat atribut data, který je v tomto případě funkčně ekvivalentní. Správný zápis by tedy vypadal takto: muj_text = document.getElementById('text1').firstChild.data. Navíc se jedná o přepisovatelnou hodnotu. Není tedy nic jednoduššího, než měnit znění textu. Například kliknutím na tento odkaz, jehož zápis je uveden níže, změníte text odkazu. Nebo lze vytvářet i různé hravé skripty např. simulace psaní počítače nebo základní textové animace.

<a id=“odkaz“ href=“Javascript: void(document.getElementById(‚odkaz‘).firstChild.data=’Jiny odkaz‘);“>tento odkaz</a>

Úprava struktur elementů

Vytvoření elementu

Vložení nového prvku do stránky probíhá ve dvou krocích. Nejprve je nutné vytvořit v paměti metodou rozhraní Document nový element. Podle toho, zda vytváříme element nebo text, použijeme buď document.createElement nebo document.createTextNode. V druhém kroku pak přes rozhraní Node vložíme element vytvořený metodou appendChild nebo insertBefore na požadované místo do hierarchie uzlů. Jak jste možná z názvů postřehli, je vždy nutné znát přesné místo, kam chcete element uložit a příslušnou metodu volat z budoucího rodičovského uzlu. Vrátíme-li se zpět k našemu „magickému“ odkazu, jednoduchou úpravou funkce lze místo nahrazení text přidat. Vyzkoušet můžete klinutím na tento odkaz. Stejným způsobem se vytvářejí a začleňují i ostatní elementy, například bloková struktura div.

<a id=“odkaz2″ href=“Javascript: t=document.createTextNode(‚s novym textem‘); void(document.getElementById(‚odkaz2‘).appendChild(t)); „>tento odkaz</a>

Vybrané metody pro vytvoření elementů a jejích aplikace na html_zapis_1:

Odstranění a nahrazení elementu

Smazat element je činnost úplně stejná, jako jej vytvořit, stačí pouze znát příslušnou metodu removeChild a samozřejmě referenci na daný objekt. Ale pozor, tak jako u appendChild platí, že mažeme potomka nějakého uzlu, tudíž volání této metody se děje přes rodiče odstraňovaného uzlu.

Vybrané metody pro smazání elementů a jejích aplikace na html_zapis_1:

Vybrané metody pro nahrazení elementů a jejích aplikace na html_zapis_1:

SMS brána

Myslím, že teoretických informací bylo prozatím dostatek. Proto se pokusíme v modelové situaci nabité znalosti použít. Představme si, že tvoříme aplikaci typu SMS brána a naším požadavkem je poskytnout koncovému uživateli funkci zasílání SMS na více čísel najednou. Pomineme teď samotnou realizaci na straně serveru, která nás momentálně nezajímá. Abychom maximálně ulehčili ovládání brány a vyhnuli se nepřehlednému zadávání více čísel do jednoho vstupního pole, nabídneme vytvoření libovolného počtu vstupních polí pro zadaní příslušných telefonních čísel. Realizaci najedete v souboru brana.htm.

Tím, co nás zajímá především, je funkce kopie(pocet), která zařídí vytvoření pocet vstupních polí. V první kroku je nutné smazat stávající adresní pole. To pro případ, kdy je funkce volána několikrát za sebou. Mazaní probíhá cyklickým mazáním uzlů (sourozenců) od prvního pole prvni_adresat, dokud se nedojde k „zarážce“ konec_adresati. Jakmile je proces ukončen, dostáváme se k samotnému tvorbě, která probíhá na třech úrovních. V první fázi se vytvoří elementární části (popisek, input, odřádkování), v druhé se části spojí v jeden div abstrakt dalsi_adresat a nakonec se daný abstrakt vloží do dokumentu před „zarážku“ konec_adresati. Proces vytvoření se pak cycklicky opakuje, podle počtu potřebných vstupních polí.

function kopie(pocet)
{
 // Odstranění stávajících polí, začátek.
 temp = ob(‚prvni_adresat‘).nextSibling;
 while(temp)
 {
  if(temp.id!=’konec_adresati‘)
  {
   temp.parentNode.removeChild(temp);
   temp = ob(‚prvni_adresat‘).nextSibling;
  }
  else {temp=null;}
  }
// Odstranění stávajících polí, konec.
// Vytvoření nového počtu polí, začátek.
 for(x=1; x<=pocet; ++x)
 {
  adresat_pole = document.createElement(‚input‘);
  adresat_pole.setAttribute(‚type‘,’text‘);
  adresat_popisek= document.createTextNode(‚Adresát č.’+(x+1)+‘ ‚);
  adresat_odradkovani= document.createElement(‚br‘);
  dalsi_adresat = document.createElement(‚div‘);
  dalsi_adresat.appendChild(adresat_odradkovani);
  dalsi_adresat.appendChild(adresat_popisek);
  dalsi_adresat.appendChild(adresat_pole);
  dalsi_adresat.appendChild(adresat_odradkovani);
  ob(‚konec_adresati‘).parentNode.insertBefore(dalsi_adresat, ob(‚konec_adresati‘));
 }
// Vytvoření nového počtu polí, konec.
}

Fragmenty

Poslední věcí, o které bych se rád zmínil, je objekt documentFragment, což je speciální uzel, který navenek vypadá jako uzel klasický. Pokud jej však vložíte do dokumentu, budou vloženy pouze jeho děti. Smysl uzlu je pouze ve vytvoření naduzlu jakožto sjednocovacího prvku. Fragment lze vytvořit zápisem novy_fragment = document.createDocumentFragment();. Buhužel, ačkoliv je součást standardu W3C DOM LEVEL1, zná jej IE až od verze 6.

Všechny soubory použité v tomto díle a další příklady si můžete najednou stáhnout v souboru dhtml3.zip

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

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