DOM – objektový model dokumentu 6.

Dnes si ukážeme další metody pro manipulaci s uzly a na závěr je pro vás připravena další shrnující taabulka.
Odstranění uzlu a odstranění atributu - metoda removeChild() a removeAttribute()

Pokud pomocí DOM vytváříme či nastavujeme hodnoty nových uzlů nebo atributů, jistě narazíme na potřebu nějaké uzly nebo atributy odstranit. Nejedná se o nic složitého.

Podívejte se na následující příklad, který tyto procedury demonstruje v praxi. Zde je HTML kód příkladu:

<html>
<head>
  <title>Odstraňování uzlů a atributů</title>
</head>

<body>
  <div id="red" style="background-color: red; width: 400px; padding: 10px"  align="right">
  červený blok
      <div id="yellow" style="background-color: yellow; width: 200px;">žlutý blok</div>
  </div>
  <a href="javascript:removeAlign();">odstranit atribut "align"</a><br>
  <a href="javascript:removeYellow();">odstranit žlutý blok</a><br>
  <a href="javascript:removeText();">odstranit text "červený blok"</a>
</body>
</html>

Jak vidíte, jedná se o dva blokové elementy. Blok se žlutým pozadím je vnořen do bloku s červeným pozadím. Červený blok má nastaven atribut align na hodnotu right. Pod těmito barevnými bloky jsou 3 odkazy, kterými se volají příslušné funkce na odstraňování uzlů či atributů.

Podívejme se podrobně na tyto 3 funkce.

Funkce removeAlign():

function removeAlign() {
      var red = document.getElementById(`red`);
  red.removeAttribute(`align`);
}

Tato funkce zajišťuje odstranění atributu align="right". Můžete se přesvědčit, že po kliknutí na odkaz odstranit atribut "align" dojde k "přecentrování" celého obsahu červeného bloku doleva, tedy na defaultní hodnotu.

Odstranění atributu zajišťuje metoda removeAttribute(). Jako parametr této metody se předává jméno příslušného atributu. Je logické, že metodu je nutné aplikovat na element, jehož atribut chceme odstranit. V našem případě je to blok s červeným pozadím, který jsme si uložili do proměnné red.

Funkce removeYellow():

function removeYellow() {
      var yellow = document.getElementById(`yellow`);
      var parent = yellow.parentNode;
      parent.removeChild(yellow);
  }

Tato funkce zajišťuje odstranění celého žlutého bloku.

Pro odstranění uzlu máme k dispozici metodu removeChild(). Jako parametr metody se předává uzel, který má být odstraněn. Metoda se aplikuje na rodiče uzlu, který má být odstraněn.

Pokud tedy chceme odstranit žlutý blok, potřebujeme získat i jeho rodiče. Tím je v našem konkrétním případě červený blok. K rodičovskému uzlu můžeme přistupovat i pomocí vlastnosti parentNode, kterou známe již z minulých dílu našeho seriálu. Použijeme tedy tuto univerzálnější cestu a uložíme si rodičovský element žlutého bloku do proměnné parent. Poté na tento rodičovský uzel aplikujeme metodu removeChild, které v parametru předáme objekt, reprezentující náš žlutý blok. Jak si můžete sami vyzkoušet, po této operaci už nebude po žlutém bloku vidu ani slechu J.

Funkce removeText() :

function removeText() {
      var red = document.getElementById(`red`);
  var text = red.firstChild;
  red.removeChild(text);
}

Ve funkci removeText() je opět použita metoda removeChild(), tentokrát ovšem je odstraněn uzel typu text, tedy konkrétně text "červený blok" v červeném bloku. Myslím, že k tomuto není potřeba dalších komentářů.

Nastavení atributů II. - metody createAttribute() a setAttributeNode()

V minulém dílu jsme si ukazovali nastavení atributů elementu pomocí metody setAttribute(). Nyní je načase ukázat i jiný způsob. Ten spočívá ve vytvoření objektu atributu využitím metody createAttribute() a poté přidání tohoto objektu k příslušnému elementu díky metodě setAttributeNode().

Metoda createAttribute() se používá ve spojení s objektem document (podobně jako metoda createElement()) a jako parametr jsou předávány jméno a hodnota atributu. Např.:

var novy_atribut = document. createAttribute("align", "left");

vytvoří nový atribut align s hodnotou left a uloží jej do proměnné novy_atribut. Poté je nutné tento atribut vložit na správné místo, k čemuž slouží metoda setAttributeNode(). Ta se aplikuje na element, ke kterému chceme atribut "přilepit". Pokud bychom pokračovali v ukázce (předpokládejme, že v proměnné element máme již uložen objekt reprezentující příslušný element), syntaxe by vypadala takto:

element.setAttributeNode(novy_atribut);

Přestože se jedná o způsob, který je zcela v souladu s W3C DOM normou, doporučuji raději držet se návodu z minulého dílu, tedy jednoduchého nastavení atributu pomocí metody setAttribute(). Důvod je ten, že obě výše uvedené metody podporuje Internet Explorer až od verze 6 a i v ostatních prohlížečích není jejich implementace příliš spolehlivá.

Metody pro práci s obsahem textového uzlu - appendData(), insertData(), replaceData() a deleteData()

Pro manipulaci s textem jsou v DOM k dispozici 4 metody, pomocí kterých je možné přidávat, vkládat, nahrazovat či mazat kusy textu. Všechny tyto metody však nefungují v Internet Exploreru 5 a 5.5.

Všechno si ukážeme na příkladu.

<html>
<head>
  <title>Data</title>
</head>

<body>
  Nějaký libovolný text.
  <br><br>
  <a href="javascript:data(0);">appendData() - přidat text "VLOŽENÝ TEXT"</a><br>
  <a href="javascript:data(1);">insertData() - vložit text "VLOŽENÝ TEXT" za slovo "Nějaký"</a><br>
  <a href="javascript:data(2);">replaceData() - nahradit slovo "text" textem "VLOŽENÝ TEXT"</a><br>
  <a href="javascript:data(3);">deleteData() - smazat slovo "libovolný"</a><br>
  <a href="javascript:reset();">reset - nastavení původního textu</a><br>
  </body>
</html>

HTML kód tohoto příkladu je velmi jednoduchý. Skládá se z textu "Nějaký libovolný text", který slouží pro "manipulační" experimenty s textem, a z 5 odkazů. První 4 odkazy volají funkci data() s číselným parametrem (tento parametr slouží jen pro odlišení, která z metod má být použita) Nastavení výchozí hodnoty je vždy provedeno automaticky a oznámeno pomocí alert(), anebo je možné ruční nastavení výchozí hodnoty kliknutím na odkaz "reset - nastavení původního textu".

Celý skript vypadá takto:

var set=false;
 
  function reset() {
      alert(`reset - nastavení původního textu`);
      document.getElementsByTagName(`body`)[0].firstChild.data = "Nějaký libovolný text.";
      set=false;
  }
 
  function data(what) {
      var text = document.getElementsByTagName(`body`)[0].firstChild;
      var TEXT = "VLOŽENÝ TEXT ";
      if (set) {
      reset();
      } else {
        if (what==0) {
        text.appendData(TEXT);
        } else if (what==1) {
        text.insertData(7, TEXT);
        } else if (what==2) {
        text.replaceData(17, 4, TEXT);
        } else if (what==3) {
        text.deleteData(7, 10);
        }
      set=true;
      }
  }

Na začátku je inicializována proměnná set a nastavena na hodnotu false. Tato proměnná slouží pro indikaci toho, zda byla provedena nějaká změna textu.

Funkce reset() slouží pro nastavení výchozí hodnoty textu.

Funkce data() obsahuje to nejzajímavější, tedy využití metod appendData(), insertData(), replaceData() a deleteData().

Na začátku je do proměnné text uložen textový uzel, se kterým bude manipulováno. Do proměnné TEXT je uložen výraz "VLOŽENÝ TEXT ".

Dále následuje testování podmínky. Pokud proměnná set nabývá hodnoty true (tj. pokud byl text změněn), je zavolána funkce reset(), která se postará o nastavení výchozí hodnoty. Pokud má proměnná set hodnotu false (tj. text je nastaven na výchozí hodnotu), proběhne zpracování hodnoty proměnné what, jejíž hodnota slouží k rozhodnutí, která ze čtyř metod bude aplikována.

Po kliknutí na odkaz appendData() - přidat text "VLOŽENÝ TEXT" je použita první z metod, appendData(). Tato metoda připojuje za textový obsah uzlu (samozřejmě uzlu typu text - na tento uzel také musí být aplikována) další textový řetězec. Vkládaný textový řetězec je předáván v parametru této metody. Výsledkem je v našem případě řetězec "Nějaký libovolný text. VLOŽENÝ TEXT".

Kliknutím na odkaz insertData() - vložit text "VLOŽENÝ TEXT" za slovo "Nějaký" dojde k použití metody insertData(). Metoda vkládá textový řetězec (předávaný jako druhý parametr) na určenou pozici textového obsahu uzlu. Tato pozice (číslovaná tradičně od nuly) je předávána jako první parametr. Výsledný text v našem příkladu bude mít tuto podobu: "Nějaký VLOŽENÝ TEXT libovolný text.".

Kliknutí na replaceData() - nahradit slovo "text" textem "VLOŽENÝ TEXT" vyvolá metodu replaceData(). Tato metoda se postará o nahrazení určité části textového obsahu uzlu jiným textovým řetězcem. Metoda má 3 parametry. Prvním je počáteční pozice textu, která bude nahrazena. Druhým je délka, tj. počet znaků textového obsahu uzlu, který bude nahrazen, a konečně třetí parametr je samotný textový řetězec, který zaujme nové místo v textovém obsahu uzlu. V našem příkladu uvidíte "Nějaký libovolný VLOŽENÝ TEXT .".

Konečně čtvrtá metoda deleteData() smaže určenou část textového obsahu uzlu. Jako první parametr je předávána počáteční pozice, jako druhý parametr délka (počet znaků) textu určeného ke smazání. Výsledkem akce spuštěné kliknutím na odkaz deleteData() - smazat slovo "libovolný" bude text "Nějaký text.".

Manipulace s textovými uzly - metoda splitText() a normalize()

V minulém dílu byla řeč o metodě createTextNode(), díky které můžeme vytvářet uzly textového typu. Vytváření textových uzlů pomocí DOM však přináší jeden zajímavou vlastnost - podívejme se na následující příklad dvou HTML stránek se stejným výsledným obsahem, ale rozdílnou strukturou DOM objektů.

První je zcela běžná stránka bez použití jakéhokoliv skriptu:

<html>
<head>
  <title>text</title>
</head>
<body>
  Nějaký libovolný text.
</body>
</html>

A tentýž výsledek vytvořený pomocí DOM:

<html>
<head>
  <title>text</title>
  <script type="text/javascript">
    <!--
  function createText() {
  var body = document.getElementsByTagName(`body`)[0];
  var nejaky = document.createTextNode("Nějaký ");
  var libovolny = document.createTextNode("libovolný ");
  var text = document.createTextNode("text.");
 
  body.appendChild(nejaky);
  body.appendChild(libovolny);
  body.appendChild(text);
  }
    //-->
    </script>
</head>
<body onload="createText()">
</body>
</html>

Nyní se zkusme zamyslet nad otázkou, jestli struktura stromu DOM objektů obou těchto dokumentů (resp. struktura stromu všech potomků elementu BODY) je stejná, či nikoliv. Na první pohled to vypadá, že ano - vždyť u obou je obsahem elementu BODY pouze textový řetězec "Nějaký libovolný text.". Nicméně skutečnost je jiná - v prvním případě má element BODY jediné dítě (textový uzel s obsahem "Nějaký libovolný text."), v druhém případě má děti tři - všechny tři jsou uzly typu text a jsou navzájem v "sourozeneckém" vztahu. Je to logické - odpovídá to způsobu, jakým byl textový obsah u druhého dokumentu vytvořen, tj. ze tří textových uzlů. Pokud bychom textový obsah vytvořili pouze pomocí jediného textového uzlu s obsahem "Nějaký libovolný text.", měl by element BODY pouze jediné dítě.

Jaké to má důsledky? Pokud budeme například aplikovat vlastnost firstChild na element BODY, dočkáme se u obou (na první pohled stejných) dokumentů zcela odlišných výsledků.

Jak z této situace ven? Pomůže nám metoda normalize(). Tato metoda nemá žádné parametry. Jejím výsledkem je spojení všech uzlů typu text v sourozeneckém vztahu do jednoho textového uzlu. Metoda se aplikuje na rodičovský element uzlů, které chceme spojit v jediný. V našem případě by to vypadalo takto:

body.normalize();

Bohužel, tato metoda není funkční v Internet Exploreru 5 a 5.5…

Opakem této metody je splitText(). Tato metoda se postará o rozdělení textového uzlu na uzly dva. Jako jediný parametr je předávána pozice, na které dojde k rozdělení (problém je, že v IE je tato pozice číslována jinak než v Mozille…). Metoda se aplikuje na textový uzel, který potřebujeme rozdělit. Po aplikaci metody obsahuje původní textový uzel první část řetězce, zatímco druhá část (od "rozdělující" pozice předané v parametru až do konce) se stane obsahem nově vytvořeného textového uzlu. Tento nově vytvořený textový uzel bude výsledkem aplikace metody splitText(), tj. bude uložen do proměnné.

Zde je příklad toho, jak bychom pomocí této metody rozdělit textový řetězec tak, aby strom DOM objektů odpovídal druhému příkladu:

<html>
<head>
  <title>text</title>
  <script type="text/javascript">
    <!--
  function splitText() {
  var body_text = document.getElementsByTagName(`body`)[0].firstChild;
  alert (body_text.nodeValue);
  var zbytek = body_text.splitText(7);
  var nejaky = body_text;
  var text = zbytek.splitText(10);
  var libovolny = zbytek;
  alert (nejaky.nodeValue);
  alert (libovolny.nodeValue);
  alert (text.nodeValue);
  }
    //-->
    </script>
</head>
<body onload="splitText()">
  Nějaký libovolný text.
</body>
</html>

Napřed je do proměnné body_text uložen celý textový uzel. Poté je rozdělen a v proměnné body_text se nyní nachází první slovo a v proměnné zbytek ostatní dvě slova ("libovolný text"). Tento řetězec je dále rozdělen a po tomto dělení obsahuje proměnná zbytek pouze slovo "libovolný" a v proměnné text je už rovnou uložen řetězec "text". Ostatní části skriptu zajišťují vložení nově vzniklých řetězců do stejnojmenných proměnných a ukázání jejich obsahu pomocí alert().

Nestandardní rozšíření Microsoftu (pouze v IE 5+)

V závěrečné části si představíme 4 metody, které lze využít pouze v Internet Exploreru verze 5 a vyšší.

clearAttributes()

Tato metoda odstraní všechny atributy elementu. Nemá žádné parametry.

Syntaxe: nejaky_element.clearAttributes();

replaceNode()

Zjednodušená varianta metody replaceChild(). Uzel předaný v parametru nahradí uzel, na který je metoda aplikována.

Syntaxe: nejaky_objekt.replaceNode(jiny_objekt);

swapNode()

Tato metoda zamění uzly, tj. přemístí jeden uzel do pozice druhého a naopak.

Syntaxe: nejaky_objekt.swapNode(jiny_objekt);

removeNode()

Tato metoda odstraní uzel. Parametr může nabývat hodnoty true, pokud mají být odstraněni i všichni potomci, nebo false, pokud nikoliv.

Syntaxe: nejaky_objekt.removeNode(true);

A na závěr tohoto dílu tu pro vás je připravena druhá tabulka, shrnující všechny metody pro manipulaci s uzly.

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
createElement(jméno) L1 Core ANO ANO ANO ANO NE  
setAttribute(jméno, hodnota) L1 Core ANO ANO ANO ANO NE pozor!
createTextNode(hodnota) L1 Core ANO ANO ANO ANO NE  
splitText(posice) L1 Core ANO ANO ANO ANO NE  
appendChild(objekt) L1 Core ANO ANO ANO ANO NE  
insertBefore(objekt, objekt) L1 Core ANO ANO ANO ANO NE  
cloneNode(true|false) L1 Core ANO ANO ANO ANO NE pozor!
replaceChild(objekt, objekt) L1 Core ANO ANO ANO ANO NE  
removeChild(objekt) L1 Core ANO ANO ANO ANO NE  
removeAttribute(jméno) L1 Core ANO ANO ANO ANO NE  
Standardní, ale "problematické" vlastnosti a metody
createAttribute(jméno, hodnota) L1 Core NE ANO ANO ANO NE chyby
setAttributeNode(objekt) L1 Core NE ANO ANO ANO NE chyby
normalize() L1 Core NE ANO ANO ANO NE  
appendData(hodnota) L1 Core NE ANO ANO ANO NE  
insertData(poč. posice, hodnota) L1 Core NE ANO ANO ANO NE  
replaceData(poč. posice, délka, hodnota) L1 Core NE ANO ANO ANO NE  
deleteData(poč. posice, délka) L1 Core NE ANO ANO ANO NE  
Nestandardní rozšíření od Microsoftu
clearAttributes(objekt) MS ANO NE NE NE NE  
replaceNode(objekt) MS ANO NE NE NE NE  
swapNode(objekt) MS ANO NE NE NE NE  
removeNode(objekt) MS ANO NE NE NE NE  

V příštím díle se podíváme na prostředky DOM pro práci s tabulkami.

Váš názor Další článek: IBM Deskstar 120GXP jen 11 hodin?

Témata článku: Software, Internet, Programování, Internet Explorer, Opera, Body, Textový řetězec, What, DOM, Doma, Mode, Core, Yellow, Objekt, Model S, Běžná stránka, Dokument, Toto, Element, První slovo, Reset, Blok, Pozice, Dok, Syntax


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

Čestné prohlášení při cestě mimo okres může být i elektronické. Stačí k tomu mobil
Lukáš Václavík
COVID-19eGovernmentDoprava
Týden Živě: On fakt dnes ještě někdo stahuje filmy z Ulož.to?

Týden Živě: On fakt dnes ještě někdo stahuje filmy z Ulož.to?

** Kauza Ulož.to a proč my dva už (moc) newarezíme ** Windows 10X existují, ale nabízí se otázka proč ** Nissan ukázal vizi kanceláře v podobě karavanu

Jakub Čížek, Vladislav Kluska | 152

Jakub ČížekVladislav Kluska
Týden ŽivěVideo
Kudy proudí doprava? Na mapách můžete sledovat autobusy, vlaky, letadla i lodě

Kudy proudí doprava? Na mapách můžete sledovat autobusy, vlaky, letadla i lodě

Současná situace cestování zrovna dvakrát nepřeje, kvůli covidu můžeme jezdit leda tak prstem po mapě. A nebo můžeme prsty nechat volné a koukat, jak po mapě cestuje někdo jiný. Díky otevřeným datům dopravních či přepravních společností je to hračka.

Lukáš Václavík | 12

Lukáš Václavík
Doprava
Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé
Markéta Mikešová
WhatsAppElon MuskFacebook
Platby kartou se můžou rozšířit úplně všude. Jako terminál poslouží mobil
Lukáš Václavík
BankaPlacení mobilemNFC
Čekali jsme skoro šest let. Android Auto jede do Česka i na Slovensko
Lukáš Václavík
Android AutoNavigaceGoogle
Volitelná aktualizace Windows 10 opravila několik chyb, způsobila ale další problémy
Karel Kilián
Windows UpdateAktualizaceWindows 10