JavaScript DOM navigace

Obsah

    Zobrazit obsah

S HTML DOM můžete procházet stromem uzlů pomocí node vztahy.

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ářů

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

Mohou být vytvořeny 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>

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

  • <html> je kořenový uzel

  • <html> nemá žádné rodiče

  • <html> je nadřazeným prvkem <head> a < body>

  • <head> je prvním potomkem <html>

  • <body> je posledním podřízeným prvkem <html>

a :

  • <head> má jednoho potomka: <title>

  • <title> má jednoho potomka (textový uzel): "Výukový program DOM"

  • <body> má dva potomky: <h1> a < p>

  • <h1> má jednoho potomka: "DOM Lekce jedna"

  • <p> má jednoho potomka: "Ahoj světe!"

  • <h1> a <p> jsou sourozenci

Navigace mezi uzly

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

  • parentNode

  • childNodes[nodenumber]

  • firstChild

  • lastChild

  • nextSibling

  • předchozíSourozenec

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 prvního dítěte:

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 prvku <h1> a zkopírují jej do prvku <p>:

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>

Zkuste to sami →

<!DOCTYPE html>
<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>

Zkuste to sami →

<!DOCTYPE html>
<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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></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 souboru HTML prvek.

Nicméně, učení ostatní výše uvedené metody jsou 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>

Zkuste to sami →

<!DOCTYPE html>
<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>

Zkuste to sami →

<!DOCTYPE html>
<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 nodeName urč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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Poznámka: nodeName vždy obsahuje název značky prvku HTML velkými písmeny.

Vlastnost nodeValue

Vlastnost nodeValue urč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 nodeType je 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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

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á.