JavaScript DOM Navigation

Indholdsfortegnelse

    Vis indholdsfortegnelse

Med HTML DOM kan du navigere i nodetræet ved hjælp af node relationer.

DOM noder

Ifølge W3C HTML DOM-standarden er alt i et HTML-dokument en node:

  • Hele dokumentet er en dokumentnode

  • Hvert HTML-element er en elementknude

  • Teksten inde i HTML-elementer er tekstnoder

  • Hver HTML-attribut er en attributknude (forældet)

  • Alle kommentarer er kommentarknudepunkter

Med HTML DOM kan alle noder i nodetræet tilgås med JavaScript.

Nye noder kan oprettes, og det hele noder kan ændres eller slettes.

Node forhold

Noderne i nodetræet har et hierarkisk forhold til hinanden.

Udtrykkene forælder, barn og søskende bruges til at beskrive relationerne.

  • I et knudetræ kaldes den øverste knude for rod (eller rodknude)

  • Hver node har nøjagtig én forælder, undtagen roden (som ikke har nogen forælder)

  • En node kan have et antal børn

  • Søskende (brødre eller søstre) er noder med samme forælder

<html>

       <head>
          <title>DOM Tutorial</title>
       </head>
	<body>
          <h1>DOM Lesson one</h1>
          <p>Hello world!</p>
       </body>
     
</html>

Fra HTML-koden ovenfor kan du læse:

  • ><html> er rodnoden

  • ><html> har ingen forældre

  • ><html> er overordnet for <head> og >< body>

  • <head> er det første underordnede af ><html>

  • ><body> er det sidste underordnede af ><html>

og :

  • <head> har ét underordnet:

  • <title> har et underordnet (en tekstnode): "DOM Tutorial"

  • <body> har to børn: ><h1> og p>

  • ><h1> har ét underordnet: "DOM Lektion et"

  • ><p> har ét barn: "Hej verden!"

  • og

    er søskende

Navigering mellem noder

Du kan bruge følgende nodeegenskaber til at navigere mellem noder med JavaScript:

  • parentNode

  • childNodes[nodenummer]

  • firstChild

  • lastChild

  • nextSibling

  • previousSibling

Underordnede noder og nodeværdier

En almindelig fejl i DOM-behandling er at forvente, at en elementnode indeholder tekst.

Eksempel:

<title 
 id="demo">DOM Tutorial</title>

Elementknudepunktet <title> (i eksemplet ovenfor) indeholder ikke tekst.

Den indeholder en tekstnode med værdien "DOM Tutorial".

Værdien af tekstnoden kan tilgås af nodens innerHTML egenskab:

myTitle = document.getElementById("demo").innerHTML;

Adgang til indreHTML-egenskaben er det samme som at få adgang til nodeValue af det første barn:

myTitle = document.getElementById("demo").firstChild.nodeValue;

Adgang til det første barn kan også gøres sådan:

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Alle de (3) følgende eksempler henter teksten til et ><h1>-element og kopierer det ind i et ><p>-element:

Eksempel

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

Prøv det selv →

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

Eksempel

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

Prøv det selv →

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

Eksempel

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

Prøv det selv →

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

InnerHTML

I denne tutorial bruger vi innerHTML-egenskaben til at hente indholdet af en HTML element.

Dog læring de andre metoder ovenfor er nyttige til at forstå træstrukturen og navigation af DOM.

DOM-rodnoder

Der er to specielle egenskaber, der giver adgang til hele dokumentet:

  • document.body - Brødteksten i dokumentet

  • document.documentElement - Det fulde dokument

Eksempel

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

Prøv det selv →

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

Eksempel

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

Prøv det selv →

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

NodeName-egenskaben

Egenskaben nodeName angiver navnet på en node.

  • nodeName er skrivebeskyttet

  • nodeNavn på en elementnode er det samme som tagnavnet

  • nodeNavn på en attribut node er attributnavnet

  • nodeNavn på en tekstnode er altid #tekst

  • nodeNavn på dokumentnoden er altid #dokument

Eksempel

 <h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeName;
</script>

Prøv det selv →

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

Bemærk: nodenavn indeholder altid tagnavnet med store bogstaver på et HTML-element.

NodeValue-egenskaben

Egenskaben nodeValue angiver værdien af en node.

  • nodeValue for element noder er null

  • nodeValue for tekstnoder er selve teksten

  • nodeValue for attributnoder er attributværdien

NodeType-egenskaben

Egenskaben nodeType er skrivebeskyttet. Det returnerer typen af en node.

Eksempel

<h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeType;
</script>

Prøv det selv →

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

De vigtigste nodeType egenskaber er:

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 er forældet i HTML DOM (men virker). Det er ikke forældet i XML DOM.