JavaScript HTML Nawigacja DOM
Dzięki HTML DOM możesz nawigować po drzewie węzłów za pomocą relacji węzłów.
Węzły DOM
Zgodnie ze standardem W3C HTML DOM, wszystko w dokumencie HTML jest węzłem:
- Cały dokument jest węzłem dokumentu
- Każdy element HTML jest węzłem elementu
- Tekst wewnątrz elementów HTML to węzły tekstowe
- Każdy atrybut HTML jest węzłem atrybutu (przestarzałe)
- Wszystkie komentarze są węzłami komentarzy
Dzięki HTML DOM wszystkie węzły w drzewie węzłów są dostępne przez JavaScript.
Można tworzyć nowe węzły, a wszystkie węzły można modyfikować lub usuwać.
Relacje węzłów
Węzły w drzewie węzłów są ze sobą powiązane hierarchicznie.
Terminy rodzic, dziecko i rodzeństwo są używane do opisania relacji.
- W drzewie węzłów najwyższy węzeł nazywa się korzeniem (lub węzłem głównym)
- Każdy węzeł ma dokładnie jednego rodzica, z wyjątkiem korzenia (który nie ma rodzica)
- Węzeł może mieć wiele dzieci
- Rodzeństwo (bracia lub siostry) to węzły z tym samym rodzicem
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Z powyższego kodu HTML możesz przeczytać:
<html>jest węzłem głównym<html>nie ma rodziców<html>jest rodzicem<head>i<body><head>jest pierwszym dzieckiem<html><body>jest ostatnim dzieckiem<html>
oraz:
<head>ma jedno dziecko:<title><title>ma jedno dziecko (węzeł tekstowy): „DOM Tutorial”<body>ma dwoje dzieci:<h1>i<p><h1>ma jedno dziecko: „Lekcja pierwsza DOM”<p>ma jedno dziecko: „Witaj świecie!”<h1>i<p>są rodzeństwem
Nawigacja między węzłami
Możesz użyć następujących właściwości węzła, aby nawigować między węzłami za pomocą JavaScript:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Węzły podrzędne i wartości węzłów
Częstym błędem podczas przetwarzania DOM jest oczekiwanie, że węzeł elementu będzie zawierał tekst.
Przykład:
<title
id="demo">DOM Tutorial</title>
Węzeł elementu
<title>(w powyższym przykładzie) nie zawiera tekstu.
Zawiera węzeł tekstowy o wartości „DOM Tutorial”.
Dostęp do wartości węzła tekstowego można uzyskać za pomocą właściwości węzła
innerHTML:
myTitle = document.getElementById("demo").innerHTML;
Dostęp do właściwości innerHTML jest taki sam jak dostęp do nodeValue
właściwości pierwszego dziecka:
myTitle = document.getElementById("demo").firstChild.nodeValue;
Dostęp do pierwszego dziecka można również wykonać w ten sposób:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Wszystkie (3) poniższe przykłady pobierają tekst <h1>elementu i kopiują go do <p>elementu:
Przykład
<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>
Przykład
<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>
Przykład
<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>
Wewnętrzny HTML
W tym samouczku używamy właściwości innerHTML, aby pobrać zawartość elementu HTML.
Jednak poznanie innych powyższych metod jest przydatne do zrozumienia struktury drzewa i nawigacji w DOM.
Węzły główne DOM
Istnieją dwie specjalne właściwości, które umożliwiają dostęp do pełnego dokumentu:
document.body- Treść dokumentudocument.documentElement- Pełny dokument
Przykład
<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>
Przykład
<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>
Właściwość nodeName
Właściwość nodeNameokreśla nazwę węzła.
- nodeName jest tylko do odczytu
- nodeName węzła elementu jest taka sama jak nazwa tagu
- nodeName atrybutu node to nazwa atrybutu
- nodeName węzła tekstowego to zawsze #text
- nodeName węzła dokumentu to zawsze #document
Przykład
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Uwaga: nodeName zawsze zawiera nazwę znacznika pisanego wielkimi literami elementu HTML.
Właściwość nodeValue
Właściwość nodeValueokreśla wartość węzła.
- nodeValue dla węzłów elementów to
null - nodeValue dla węzłów tekstowych to sam tekst
- nodeValue dla węzłów atrybutów to wartość atrybutu
Właściwość nodeType
Właściwość nodeTypejest tylko do odczytu. Zwraca typ węzła.
Przykład
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
Najważniejsze właściwości nodeType to:
| 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 jest przestarzały w HTML DOM (ale działa). Nie jest przestarzały w XML DOM.