JavaScript HTML DOM-navigatie
Met de HTML DOM kunt u door de knooppuntenstructuur navigeren met behulp van knooppuntrelaties.
DOM-knooppunten
Volgens de W3C HTML DOM-standaard is alles in een HTML-document een knooppunt:
- Het hele document is een documentknooppunt
- Elk HTML-element is een elementknooppunt
- De tekst in HTML-elementen zijn tekstknooppunten
- Elk HTML-kenmerk is een attribuutknooppunt (verouderd)
- Alle opmerkingen zijn commentaarknooppunten
Met de HTML DOM zijn alle knooppunten in de knooppuntenstructuur toegankelijk via JavaScript.
Er kunnen nieuwe knooppunten worden gemaakt en alle knooppunten kunnen worden gewijzigd of verwijderd.
Knooppuntrelaties
De knooppunten in de knooppuntenboom hebben een hiërarchische relatie tot elkaar.
De termen ouder, kind en broer of zus worden gebruikt om de relaties te beschrijven.
- In een knooppuntenboom wordt het bovenste knooppunt de wortel (of wortelknooppunt) genoemd
- Elk knooppunt heeft precies één ouder, behalve de wortel (die geen ouder heeft)
- Een knoop kan een aantal kinderen hebben
- Broers en zussen (broers of zussen) zijn knooppunten met dezelfde ouder
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Uit de bovenstaande HTML kunt u lezen:
<html>is het hoofdknooppunt<html>heeft geen ouders<html>is de ouder van<head>and<body><head>is het eerste kind van<html><body>is het laatste kind van<html>
en:
<head>heeft één kind:<title><title>heeft één kind (een tekstknooppunt): "DOM Tutorial"<body>heeft twee kinderen:<h1>en<p><h1>heeft één kind: "DOM Les één"<p>heeft één kind: "Hallo wereld!"<h1>en<p>zijn broers en zussen
Navigeren tussen knooppunten
U kunt de volgende knooppunteigenschappen gebruiken om met JavaScript tussen knooppunten te navigeren:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Onderliggende knooppunten en knooppuntwaarden
Een veelvoorkomende fout bij DOM-verwerking is te verwachten dat een elementknooppunt tekst bevat.
Voorbeeld:
<title
id="demo">DOM Tutorial</title>
Het elementknooppunt
<title>(in het bovenstaande voorbeeld) bevat geen tekst.
Het bevat een tekstknooppunt met de waarde "DOM Tutorial".
De waarde van het tekstknooppunt is toegankelijk via de eigenschap van het knooppunt
innerHTML:
myTitle = document.getElementById("demo").innerHTML;
Toegang tot de eigenschap innerHTML is hetzelfde als toegang tot de nodeValue
van het eerste kind:
myTitle = document.getElementById("demo").firstChild.nodeValue;
Toegang krijgen tot het eerste kind kan ook als volgt worden gedaan:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Alle (3) volgende voorbeelden halen de tekst van een <h1>element op en kopiëren deze naar een <p>element:
Voorbeeld
<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>
Voorbeeld
<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>
Voorbeeld
<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>
Innerlijke HTML
In deze tutorial gebruiken we de eigenschap innerHTML om de inhoud van een HTML-element op te halen.
Het leren van de andere bovenstaande methoden is echter nuttig om de boomstructuur en de navigatie van de DOM te begrijpen.
DOM-rootknooppunten
Er zijn twee speciale eigenschappen die toegang geven tot het volledige document:
document.body- De hoofdtekst van het documentdocument.documentElement- Het volledige document
Voorbeeld
<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>
Voorbeeld
<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>
De eigenschap nodeName
De nodeNameeigenschap specificeert de naam van een knooppunt.
- nodeName is alleen-lezen
- nodeName van een element node is hetzelfde als de tagnaam
- nodeName van een attribuutknooppunt is de attribuutnaam
- nodeNaam van een tekstknooppunt is altijd #text
- nodeNaam van het documentknooppunt is altijd #document
Voorbeeld
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Let op: nodeName bevat altijd de tagnaam in hoofdletters van een HTML-element.
De nodeValue-eigenschap
De nodeValueeigenschap specificeert de waarde van een knooppunt.
- nodeValue voor elementknooppunten is
null - nodeValue voor tekstknooppunten is de tekst zelf
- nodeValue voor attribuutknooppunten is de attribuutwaarde
De nodeType-eigenschap
De nodeTypeeigenschap is alleen-lezen. Het geeft het type van een knoop terug.
Voorbeeld
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
De belangrijkste nodeType-eigenschappen zijn:
| 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> |
Type 2 is verouderd in de HTML DOM (maar werkt). Het is niet verouderd in de XML DOM.