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ářů
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>
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 dokumentudocument.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 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>
Poznámka: nodeName
vždy obsahuje velký název tagu prvku HTML.
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>
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á.