Výukový program JS

JS HOME Úvod do JS JS Kam vést Výstup JS JS prohlášení Syntaxe JS Komentáře JS JS proměnné JS Let JS Const Operátoři JS JS aritmetika Zadání JS JS datové typy Funkce JS JS objekty Události JS JS struny JS String Methods JS String Search Šablony řetězců JS JS čísla Metody čísel JS JS Arrays Metody JS Array JS Array Sort Iterace pole JS JS Array Const JS Termíny Formáty data JS JS metody získávání data JS metody nastavení data JS Math JS Náhodný JS Booleans JS Srovnání Podmínky JS Přepínač JS JS Loop For JS Loop For In JS Loop For Of Zatímco JS Loop JS Break JS Iterables Sady JS Mapy JS Typ JS Konverze typu JS JS Bitwise JS RegExp Chyby JS Rozsah JS JS Zvedací zařízení Přísný režim JS JS toto klíčové slovo Funkce šipky JS JS třídy JS JSON Ladění JS Průvodce stylem JS JS Best Practices Chyby JS Výkon JS JS Reserved Words

Verze JS

Verze JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historie JS

JS objekty

Definice objektů Vlastnosti objektu Objektové metody Zobrazení objektu Objektové přístupové objekty Konstruktory objektů Prototypy objektů Iterovatelné objekty Sady objektů Mapy objektů Reference objektu

Funkce JS

Definice funkcí Funkční parametry Vyvolání funkce Volání funkce Funkce Použít Funkční uzávěry

JS třídy

Úvod do třídy Třídní dědičnost Třída Statická

JS Async

JS zpětná volání JS asynchronní JS Sliby JS Async/Await

JS HTML DOM

Úvod do DOM Metody DOM Dokument DOM Prvky DOM DOM HTML Formuláře DOM DOM CSS DOM animace Události DOM DOM Event Listener Navigace DOM DOM uzly Kolekce DOM Seznamy uzlů DOM

Kusovník prohlížeče JS

Okno JS Obrazovka JS Umístění JS Historie JS JS Navigator Popup Alert JS Časování JS Soubory cookie JS

Webová rozhraní API JS

Úvod do webového rozhraní API Web Forms API Webová historie API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

Úvod do AJAXu AJAX XMLHttp Požadavek AJAX Odpověď AJAX Soubor XML AJAX AJAX PHP AJAX ASP Databáze AJAX Aplikace AJAX Příklady AJAX

JS JSON

Úvod do JSON Syntaxe JSON JSON vs XML Datové typy JSON Analýza JSON JSON Stringify Objekty JSON Pole JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selektory jQuery HTML jQuery jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Příklady JS

Příklady JS JS HTML DOM Vstup HTML JS JS HTML objekty JS HTML události Prohlížeč JS Editor JS Cvičení JS JS kvíz Certifikát JS

JS Reference

Objekty JavaScriptu HTML DOM objekty


JavaScript HTML DOM navigace


Pomocí HTML DOM můžete procházet stromem uzlů pomocí vztahů uzlů.


DOM uzly

Podle standardu W3C HTML DOM je vše v dokumentu HTML uzel:

  • Celý dokument je uzel dokumentu
  • Každý prvek HTML je uzel prvku
  • Text uvnitř prvků HTML jsou textové uzly
  • Každý atribut HTML je uzel atributu (zastaralé)
  • Všechny komentáře jsou uzly komentářů
DOM HTML tree

Pomocí HTML DOM lze ke všem uzlům ve stromu uzlů přistupovat pomocí JavaScriptu.

Lze vytvořit nové uzly a všechny uzly lze upravit nebo odstranit.


Vztahy uzlů

Uzly ve stromu uzlů mají mezi sebou hierarchický vztah.

K popisu vztahů se používají pojmy rodič, dítě a sourozenec.

  • Ve stromu uzlů se nejvyšší uzel nazývá kořen (nebo kořenový uzel)
  • Každý uzel má přesně jednoho rodiče, kromě kořene (který nemá žádného rodiče)
  • Uzel může mít několik potomků
  • Sourozenci (bratři nebo sestry) jsou uzly se stejným rodičem
<html>

  <head>
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html>
Strom uzlů

Z výše uvedeného HTML můžete číst:

  • <html> je kořenový uzel
  • <html> nemá rodiče
  • <html>je rodičem <head>a<body>
  • <head> je prvním dítětem <html>
  • <body> je posledním dítětem <html>

a:

  • <head> má jedno dítě: <title>
  • <title> má jednoho potomka (textový uzel): "DOM Tutorial"
  • <body>má dvě děti: <h1>a<p>
  • <h1> má jedno dítě: "DOM Lekce jedna"
  • <p> má jedno dítě: "Ahoj světe!"
  • <h1>a <p>jsou sourozenci


Navigace mezi uzly

K navigaci mezi uzly pomocí JavaScriptu můžete použít následující vlastnosti uzlu:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Podřízené uzly a hodnoty uzlů

Běžnou chybou při zpracování modelu DOM je očekávat, že uzel prvku bude obsahovat text.

Příklad:

<title id="demo">DOM Tutorial</title>

Uzel prvku <title>(ve výše uvedeném příkladu) neobsahuje text.

Obsahuje textový uzel s hodnotou "DOM Tutorial".

K hodnotě textového uzlu lze přistupovat pomocí vlastnosti uzlu innerHTML:

myTitle = document.getElementById("demo").innerHTML;

Přístup k vlastnosti innerHTML je stejný jako přístup k nodeValue vlastnosti prvního potomka:

myTitle = document.getElementById("demo").firstChild.nodeValue;

Přístup k prvnímu dítěti lze také provést takto:

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Všechny (3) následující příklady načítají text <h1>prvku a zkopírují jej do <p>prvku:

Příklad

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

Příklad

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Příklad

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

Vnitřní HTML

V tomto tutoriálu používáme vlastnost innerHTML k načtení obsahu prvku HTML.

Naučit se ostatní výše uvedené metody je však užitečné pro pochopení stromové struktury a navigace DOM.


Kořenové uzly DOM

Existují dvě speciální vlastnosti, které umožňují přístup k celému dokumentu:

  • document.body - Tělo dokumentu
  • document.documentElement - Celý dokument

Příklad

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

Příklad

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

Vlastnost nodeName

Vlastnost nodeNameurčuje název uzlu.

  • nodeName je pouze pro čtení
  • nodeName uzlu prvku je stejný jako název tagu
  • nodeName uzlu atributu je název atributu
  • uzelJméno textového uzlu je vždy #text
  • nodeName uzlu dokumentu je vždy #document

Příklad

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Poznámka: nodeName vždy obsahuje velký název tagu prvku HTML.


Vlastnost nodeValue

Vlastnost nodeValueurčuje hodnotu uzlu.

  • nodeValue pro uzly prvku je null
  • nodeValue pro textové uzly je samotný text
  • nodeValue pro uzly atributu je hodnota atributu

Vlastnost nodeType

Vlastnost nodeTypeje pouze pro čtení. Vrací typ uzlu.

Příklad

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Nejdůležitější vlastnosti nodeType jsou:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2  class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Typ 2 je v HTML DOM zastaralý (ale funguje). V XML DOM není zastaralá.