Modifikace dokumentu

Klíčem k vytváření „živých“ stránek je modifikace DOMu.

Zde uvidíme, jak vytvářet nové elementy „za běhu“ a jak modifikovat obsah existující stránky.

Příklad: zobrazení zprávy

PÅ™edveďme si to na příkladu. PÅ™idáme na stránku zprávu, která bude vypadat lépe než alert.

Bude to vypadat následovně:

<style>
.upozornění {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="upozornění">
  <strong>Nazdar!</strong> Právě čteš důležitou zprávu.
</div>

To byl příklad v HTML. Nyní vytvoÅ™me stejný div v JavaScriptu (pÅ™edpokládáme, že styly jsou již definovány v HTML/CSS).

Vytvoření elementu

K vytvoření DOM uzlu slouží dvě metody:

document.createElement(značka)

Vytvoří nový elementový uzel se zadanou značkou:

let div = document.createElement('div');

document.createTextNode(text)

Vytvoří nový textový uzel se zadaným textem:

let textovýUzel = document.createTextNode('Tady jsem');

VÄ›tÅ¡inou potÅ™ebujeme vytvářet elementové uzly, například div pro naÅ¡i zprávu.

Vytvoření zprávy

VytvoÅ™ení značky div pro zprávu se skládá ze tří kroků:

// 1. Vytvoříme element <div>
let div = document.createElement('div');

// 2. Nastavíme jeho třídu na "upozornění"
div.className = "upozornění";

// 3. Vložíme do něj obsah
div.innerHTML = "<strong>Nazdar!</strong> Právě čteš důležitou zprávu.";

VytvoÅ™ili jsme element. Prozatím se vÅ¡ak nachází jen v promÄ›nné jménem div a ne na stránce, takže ho nemůžeme vidÄ›t.

Metody pro vkládání

Aby se nám div ukázal, musíme ho vložit nÄ›kam do document, například do elementu <body>, na který se odkazuje document.body.

K tomu slouží speciální metoda append: document.body.append(div).

Zde je celý kód:

<style>
.upozornění {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "upozornění";
  div.innerHTML = "<strong>Nazdar!</strong> Právě čteš důležitou zprávu.";

  document.body.append(div);
</script>

Tady jsme volali append na document.body, ale metodu append můžeme volat i na kterémkoli jiném elementu, abychom do nÄ›j vložili další element. Můžeme například nÄ›co pÅ™ipojit k <div> voláním div.append(dalšíElement).

Existují i další vkládací metody, které specifikují jiná místa, kam se má vkládat:

• uzel.append(...uzly nebo řetězce) – pÅ™ipojí uzly nebo Å™etÄ›zce na konec uzlu uzel,
• uzel.prepend(...uzly nebo řetězce) – vloží uzly nebo Å™etÄ›zce na začátek uzlu uzel,
• uzel.before(...uzly nebo řetězce) –- vloží uzly nebo Å™etÄ›zce pÅ™ed uzel,
• uzel.after(...uzly nebo řetězce) –- vloží uzly nebo Å™etÄ›zce za uzel,
• uzel.replaceWith(...uzly nebo řetězce) –- nahradí uzel zadanými uzly nebo Å™etÄ›zci.

Argumenty těchto metod je jakýkoli seznam DOM uzlů, které se mají vložit, nebo textových řetězců (z nich se automaticky vytvoří textové uzly).

Podívejme se na ně v akci.

Následuje příklad, jak pomocí těchto metod přidat prvky do seznamu a text před a za něj:

<ol id="ol">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  ol.before('před'); // vloží řetězec "před" před <ol>
  ol.after('za'); // vloží řetězec "za" za <ol>

  let liPrvní = document.createElement('li');
  liPrvní.innerHTML = 'začátek';
  ol.prepend(liPrvní); // vloží liPrvní na začátek <ol>

  let liPoslední = document.createElement('li');
  liPoslední.innerHTML = 'konec';
  ol.append(liPoslední); // vloží liPoslední na konec <ol>
</script>

Na obrázku je zobrazeno, co tyto metody dělají:

Výsledný seznam tedy bude:

před
<ol id="ol">
  <li>začátek</li>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>konec</li>
</ol>
za

Jak bylo uvedeno, tyto metody dokáží vložit více uzlů a částí textu při jednom volání.

Například zde se vloží řetězec a element:

<div id="div"></div>
<script>
  div.before('<p>Ahoj</p>', document.createElement('hr'));
</script>

Prosíme vÅ¡imnÄ›te si, že text se vloží „jako text“, ne „jako HTML“, takže znaky jako < a > budou přísluÅ¡ným způsobem upraveny.

Výsledný HTML kód tedy je:

<p>Ahoj</p>
<hr>
<div id="div"></div>

Jinými slovy, Å™etÄ›zce se vloží bezpečným způsobem stejnÄ›, jak to dÄ›lá elem.textContent.

Tyto metody tedy můžeme použít jedině ke vkládání DOM uzlů a částí textu.

Ale co když chceme vložit HTML Å™etÄ›zec „jako html“, aby v nÄ›m fungovaly vÅ¡echny značky a vÅ¡echno ostatní, stejnÄ›, jak to provádí elem.innerHTML?

insertAdjacentHTML/Text/Element

K tomu můžeme použít jinou, víceúčelovou metodu: elem.insertAdjacentHTML(kam, html).

Prvním parametrem je kódové slovo, které specifikuje, kam se má vkládat, relativnÄ› vůči elem. Musí to být jedno z následujících:

• "beforebegin" – vloží html bezprostÅ™ednÄ› pÅ™ed elem,
• "afterbegin" – vloží html do elem na začátek,
• "beforeend" – vloží html do elem na konec,
• "afterend" – vloží html bezprostÅ™ednÄ› za elem.

Druhým parametrem je HTML řetězec, který bude vložen „jako HTML“.

Příklad:

<div id="div"></div>
<script>
  div.insertAdjacentHTML('beforebegin', '<p>Ahoj</p>');
  div.insertAdjacentHTML('afterend', '<p>Sbohem</p>');
</script>

…Vytvoří:

<p>Ahoj</p>
<div id="div"></div>
<p>Sbohem</p>

Tímto způsobem můžeme ke stránce připojit libovolný HTML kód.

Varianty vkládání jsou znázorněny na obrázku:

Snadno si všimneme podobností mezi tímto a předchozím obrázkem. Místa pro vkládání jsou ve skutečnosti stejná, ale tato metoda vkládá HTML kód.

Tato metoda má dvě sesterské metody:

• elem.insertAdjacentText(kam, text) – stejná syntaxe, ale Å™etÄ›zec text se místo HTML vloží „jako text“,
• elem.insertAdjacentElement(kam, elem) – stejná syntaxe, ale vloží element.

Tyto metody existují hlavnÄ› proto, aby syntaxe byla „jednotná“. V praxi se vÄ›tÅ¡inou používá jen insertAdjacentHTML, protože pro elementy a text máme metody append/prepend/before/after – jsou kratší na napsání a umÄ›jí vkládat uzly nebo části textu.

Zde je tedy alternativní varianta zobrazení zprávy:

<style>
.upozornění {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  document.body.insertAdjacentHTML("afterbegin", `<div class="upozornění">
    <strong>Nazdar!</strong> Právě čteš důležitou zprávu.
  </div>`);
</script>

Odstranění uzlu

K odstranÄ›ní uzlu slouží metoda uzel.remove().

Nechme naši zprávu za jednu sekundu zmizet:

<style>
.upozornění {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "upozornění";
  div.innerHTML = "<strong>Nazdar!</strong> Právě čteš důležitou zprávu.";

  document.body.append(div);
  setTimeout(() => div.remove(), 1000);
</script>

Prosíme všimněte si, že jestliže chceme přemístit element na jiné místo, nemusíme jej z původního místa odstraňovat.

Všechny vkládací metody automaticky odstraní uzel z místa, kde se nacházel předtím.

Například prohoďme elementy navzájem:

<div id="první">První</div>
<div id="druhý">Druhý</div>
<script>
  // není třeba volat remove
  druhý.after(první); // vezme #druhý a za něj vloží #první
</script>

Klonování uzlů: cloneNode

Jak vložit další podobnou zprávu?

Mohli bychom vytvoÅ™it funkci a vložit kód do ní. Alternativním způsobem vÅ¡ak je klonovat existující div a zmÄ›nit text uvnitÅ™ nÄ›j (pokud to potÅ™ebujeme).

Někdy, když máme velký element, to může být rychlejší a jednodušší.

• Volání elem.cloneNode(true) vytvoří „hluboký“ klon elementu – se vÅ¡emi atributy a podelementy. Jestliže zavoláme elem.cloneNode(false), bude klon vytvoÅ™en bez dÄ›tských elementů.

Příklad kopírování zprávy:

<style>
.upozornění {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="upozornění" id="div">
  <strong>Nazdar!</strong> Právě čteš důležitou zprávu.
</div>

<script>
  let div2 = div.cloneNode(true); // naklonujeme zprávu
  div2.querySelector('strong').innerHTML = 'Sbohem!'; // změníme klon

  div.after(div2); // zobrazíme klon za existujícím <div>
</script>

DocumentFragment

DocumentFragment je speciální DOM uzel, který slouží jako obal pro pÅ™edávání seznamů uzlů.

Můžeme k němu přidávat další uzly, ale když jej někam vložíme, místo něj se vloží jeho obsah.

Například následující funkce vraťObsahSeznamu vygeneruje fragment s prvky <li>, které jsou následnÄ› vloženy do <ul>:

<ul id="ul"></ul>

<script>
function vraťObsahSeznamu() {
  let fragment = new DocumentFragment();

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    fragment.append(li);
  }

  return fragment;
}

ul.append(vraťObsahSeznamu()); // (*)
</script>

Prosíme vÅ¡imnÄ›te si, že na posledním řádku (*) jsme pÅ™ipojili DocumentFragment, ale ten „vymizí“ a výsledná struktura bude následující:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

DocumentFragment se explicitnÄ› používá jen zřídka. Proč bychom mÄ›li nÄ›co pÅ™ipojovat ke speciálnímu druhu uzlu, když místo nÄ›j můžeme vrátit pole uzlů? PÅ™epsaný příklad:

<ul id="ul"></ul>

<script>
function vraťObsahSeznamu() {
  let výsledek = [];

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    výsledek.push(li);
  }

  return výsledek;
}

ul.append(...vraťObsahSeznamu()); // append + operátor "..." = přátelé!
</script>

Zmínili jsme DocumentFragment hlavnÄ› proto, že na nÄ›m jsou postaveny určité koncepty, například element Å¡ablony, který probereme mnohem pozdÄ›ji.

Vkládací a odebírací metody ze staré školy

Existují i metody pro manipulaci s DOMem „ze staré školy“, které jsou zachovány z historických důvodů.

Tyto metody pocházejí z mnohem dřívÄ›jší doby. V současnosti není důvod je používat, jelikož moderní metody, napÅ™. append, prepend, before, after, remove, replaceWith, jsou flexibilnÄ›jší.

Jediným důvodem, proč zde tyto metody uvádíme, je, že je můžete najít v mnoha starých skriptech:

rodičovskýElement.appendChild(uzel)

PÅ™ipojí uzel jako poslední dítÄ› elementu rodičovskýElement.

Následující příklad pÅ™idá nový <li> na konec <ol>:

<ol id="seznam">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  let novýLi = document.createElement('li');
  novýLi.innerHTML = 'Ahoj, světe!';

  seznam.appendChild(novýLi);
</script>

rodičovskýElement.insertBefore(uzel, dalšíSourozenec)

Vloží uzel pÅ™ed uzel dalšíSourozenec do elementu rodičovskýElement.

Následující kód vloží nový prvek seznamu pÅ™ed druhý <li>:

<ol id="seznam">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>
<script>
  let novýLi = document.createElement('li');
  novýLi.innerHTML = 'Ahoj, světe!';

  seznam.insertBefore(novýLi, seznam.children[1]);
</script>

Chceme-li vložit novýLi jako první element, můžeme to udÄ›lat následovnÄ›:

seznam.insertBefore(novýLi, seznam.firstChild);

rodičovskýElement.replaceChild(uzel, původníDítě)

Nahradí původníDítě mezi dÄ›tmi elementu rodičovskýElement uzlem uzel.

rodičovskýElement.removeChild(uzel)

Odstraní uzel z elementu rodičovskýElement (za pÅ™edpokladu, že uzel je jeho dítÄ›tem).

Následující příklad odstraní první <li> z <ol>:

<ol id="seznam">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  let li = seznam.firstElementChild;
  seznam.removeChild(li);
</script>

VÅ¡echny tyto metody vracejí vložený nebo odstranÄ›ný uzel. Jinými slovy, rodičovskýElement.appendChild(uzel) vrátí uzel. Návratová hodnota se vÅ¡ak obvykle nepoužívá, prostÄ› jen zavoláme metodu.

Pár slov o „document.write“

Existuje jeÅ¡tÄ› jedna, velice stará metoda pro pÅ™idávání na webovou stránku: document.write.

Syntaxe:

<p>Někde na stránce...</p>
<script>
  document.write('<b>Pozdrav od JS</b>');
</script>
<p>Konec</p>

Volání document.write(html) zapíše html na stránku „právÄ› tady a teď“. ŘetÄ›zec html může být dynamicky generován, takže metoda je do určité míry flexibilní. Můžeme v JavaScriptu vytvoÅ™it webovou stránku obsahující vÅ¡e potÅ™ebné a zapsat ji.

Tato metoda pochází ještě z doby, kdy neexistoval žádný DOM, žádné standardy… Z opravdu dávné doby. Stále však existuje, protože jsou skripty, které ji využívají.

V moderních skriptech ji vidíme jen zřídka, a to kvůli následujícímu důležitému omezení:

Volání document.write funguje jen tehdy, dokud se stránka načítá.

Pokud ji zavoláme později, stávající obsah dokumentu bude smazán.

Příklad:

<p>Po jedné sekundě bude obsah této stránky nahrazen...</p>
<script>
  // document.write po 1 sekundÄ›
  // tedy po načtení této stránky, takže existující obsah se smaže
  setTimeout(() => document.write('<b>...Tímto.</b>'), 1000);
</script>

Ve stavu „po načtení“ je tedy víceméně nepoužitelná, na rozdíl od ostatních DOM metod, které jsme tady probrali.

To je její nevýhoda.

Má vÅ¡ak i výhodu. Technicky, když je document.write zavolána a nÄ›co zapíše, zatímco prohlížeč načítá („parsuje“) pÅ™icházející HTML kód, prohlížeč to zpracuje tak, jako by to bylo v původním HTML kódu.

Funguje tedy bleskově rychle, protože se nekoná žádná modifikace DOMu. Zapisuje rovnou do textu stránky, dokud ještě DOM není vytvořen.

Pokud tedy potřebujeme dynamicky přidat do HTML velké množství textu, nacházíme se ve fázi načítání stránky a záleží nám na rychlosti, tato metoda nám může pomoci. V praxi však tyto požadavky málokdy přicházejí současně. A ve skriptech tuto metodu vidíme převážně proto, že jsou prostě staré.

Shrnutí

• Metody pro vytváření nových uzlů:

  • document.createElement(značka) – vytvoří element se zadanou značkou,
  • document.createTextNode(hodnota) – vytvoří textový uzel (používá se málokdy),
  • elem.cloneNode(hluboce) – naklonuje element, pokud hluboce==true, pak se vÅ¡emi potomky.

• Vkládání a odstraňování:

  • uzel.append(...uzly nebo řetězce) – vloží do uzel na jeho konec,
  • uzel.prepend(...uzly nebo řetězce) – vloží do uzel na jeho začátek,
  • uzel.before(...uzly nebo řetězce) – vloží bezprostÅ™ednÄ› pÅ™ed uzel,
  • uzel.after(...uzly nebo řetězce) – vloží bezprostÅ™ednÄ› za uzel,
  • uzel.replaceWith(...uzly nebo řetězce) – nahradí uzel,
  • uzel.remove() – odstraní uzel.

  Textové řetězce se vkládají „jako text“.

• Existují i metody „ze staré Å¡koly“:

  • rodič.appendChild(uzel)
  • rodič.insertBefore(uzel, dalšíSourozenec)
  • rodič.removeChild(uzel)
  • rodič.replaceChild(novýElement, uzel)

  VÅ¡echny tyto metody vracejí uzel.

• Máme-li nÄ›jaký HTML kód v promÄ›nné html, pak jej elem.insertAdjacentHTML(kam, html) vloží na místo, které závisí na hodnotÄ› kam:

  • "beforebegin" – vloží html bezprostÅ™ednÄ› pÅ™ed elem,
  • "afterbegin" – vloží html do elem na jeho začátek,
  • "beforeend" – vloží html do elem na jeho konec,
  • "afterend" – vloží html bezprostÅ™ednÄ› za elem.

  Existují i podobné metody elem.insertAdjacentText a elem.insertAdjacentElement, které vkládají textové Å™etÄ›zce a elementy, ale používají se jen zřídka.

• Pro pÅ™ipojení HTML kódu ke stránce, jeÅ¡tÄ› než skončilo její načítání:

  • document.write(html)

  Po dokončení načítání stránky toto volání smaže dokument. K vidění převážně ve starých skriptech.