JavaScript HTML DOM Navigasie
Met die HTML DOM kan jy die nodusboom navigeer deur nodusverhoudings te gebruik.
DOM nodusse
Volgens die W3C HTML DOM-standaard is alles in 'n HTML-dokument 'n nodus:
- Die hele dokument is 'n dokumentnodus
- Elke HTML-element is 'n elementnodus
- Die teks binne HTML-elemente is teksnodusse
- Elke HTML-kenmerk is 'n kenmerknodus (verwerp)
- Alle opmerkings is kommentaar nodusse
Met die HTML DOM kan alle nodusse in die nodus boom verkry word deur JavaScript.
Nuwe nodusse kan geskep word, en alle nodusse kan gewysig of uitgevee word.
Nodusverhoudings
Die nodusse in die nodusboom het 'n hiërargiese verhouding tot mekaar.
Die terme ouer, kind en broer of suster word gebruik om die verhoudings te beskryf.
- In 'n nodusboom word die boonste nodus die wortel (of wortelknoop) genoem
- Elke nodus het presies een ouer, behalwe die wortel (wat geen ouer het nie)
- 'n Nodus kan 'n aantal kinders hê
- Broers en susters (broers of susters) is nodusse met dieselfde ouer
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Van die HTML hierbo kan jy lees:
<html>is die wortelknooppunt<html>het geen ouers nie<html>is die ouer van<head>en<body><head>is die eerste kind van<html><body>is die laaste kind van<html>
en:
<head>het een kind:<title><title>het een kind ('n teksnodus): "DOM Tutoriaal"<body>het twee kinders:<h1>en<p><h1>het een kind: "DOM Les een"<p>het een kind: "Hallo wêreld!"<h1>en<p>is broers en susters
Navigeer tussen nodusse
Jy kan die volgende noduseienskappe gebruik om tussen nodusse met JavaScript te navigeer:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Kindnodusse en noduswaardes
'n Algemene fout in DOM-verwerking is om te verwag dat 'n elementnodus teks bevat.
Voorbeeld:
<title
id="demo">DOM Tutorial</title>
Die element node
<title>(in die voorbeeld hierbo) bevat nie teks nie.
Dit bevat 'n teksnodus met die waarde "DOM Tutoriaal".
Die waarde van die teksnodus kan verkry word deur die nodus se
innerHTMLeiendom:
myTitle = document.getElementById("demo").innerHTML;
Toegang tot die innerHTML-eienskap is dieselfde as toegang tot die nodeValue
van die eerste kind:
myTitle = document.getElementById("demo").firstChild.nodeValue;
Toegang tot die eerste kind kan ook soos volg gedoen word:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Al die (3) volgende voorbeelde haal die teks van 'n <h1>element op en kopieer dit in 'n <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>
InnerHTML
In hierdie tutoriaal gebruik ons die innerHTML-eienskap om die inhoud van 'n HTML-element te herwin.
Om die ander metodes hierbo te leer, is egter nuttig om die boomstruktuur en die navigasie van die DOM te verstaan.
DOM-wortelnodusse
Daar is twee spesiale eienskappe wat toegang tot die volledige dokument toelaat:
document.body- Die liggaam van die dokumentdocument.documentElement- Die volledige dokument
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>
Die nodeName Eiendom
Die nodeNameeienskap spesifiseer die naam van 'n nodus.
- nodeName is leesalleen
- nodeNaam van 'n element node is dieselfde as die merkernaam
- nodeNaam van 'n kenmerk node is die kenmerknaam
- nodeNaam van 'n teksnodus is altyd #teks
- nodeNaam van die dokument node is altyd #dokument
Voorbeeld
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Let wel: nodeName bevat altyd die hooflettermerkernaam van 'n HTML-element.
Die nodeValue Eiendom
Die nodeValueeienskap spesifiseer die waarde van 'n nodus.
- nodeValue vir element nodusse is
null - nodeValue vir teksnodes is die teks self
- nodeValue vir kenmerk nodes is die kenmerkwaarde
Die nodeType Eiendom
Die nodeTypeeiendom is leesalleen. Dit gee die tipe nodus terug.
Voorbeeld
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
Die belangrikste nodeType eienskappe is:
| 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> |
Tipe 2 is afgekeur in die HTML DOM (maar werk). Dit word nie in die XML DOM opgeskort nie.