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:
createElement |
Zápis: newSpan = document.createElement('span'); Vrací: referenci na nový element span v paměti |
createTextNode |
Zápis: newText = document.createTextNode('nejaky text'); Vrací: referenci na nový uzel typu text v paměti |
appendChild |
Zápis: document.getElementById('div1').appendChild(newSpan); Vysvětlení: přidá elementu s atributem id='div1' nového potomka newSpan |
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:
removeChild |
Zápis: document.getElementById('text1').parentNode.removeChild(document.getElementById('text1')); Vysvětlení: smaže element s atributem id='text1' |
Vybrané metody pro nahrazení elementů a jejích aplikace na html_zapis_1:
replaceChild |
Zápis: document.getElementById('text1').parentNode.replaceChild(newSpan, document.getElementById('text1')); Vysvětlení: smaže element s atributem id='text1' |
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.
Mohlo by vás také zajímat
-
4 tipy, jak na efektivní úsporu při rozjezdu podnikání
3. ledna 2023 -
Užitečné nástroje pro bezpečnost na internetu
17. října 2024 -
Zabezpečení e-mailů: Jak můžete chránit vaši firemní komunikaci
13. prosince 2023 -
AI na dosah ruky: Jak je to s AI v osobních zařízeních?
22. ledna 2024
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024