JavaScript DOM-navigering


Innehållsförteckning

    Visa innehållsförteckning


Med HTML DOM kan du navigera i nodträdet med hjälp av nod relationer.


DOM-noder

Enligt W3C HTML DOM-standarden är allt i ett HTML-dokument en nod:

  • Hela dokumentet är en dokumentnod

  • Varje HTML-element är en elementnod

  • Texten inuti HTML-element är textnoder

  • Varje HTML-attribut är en attributnod (utfasad)

  • Alla kommentarer är kommentarsnoder

Med HTML DOM kan alla noder i nodträdet nås med JavaScript.

Nya noder kan skapas, och allt noder kan ändras eller tas bort.


Nodrelationer

Noderna i nodträdet har en hierarkisk relation till varandra.

Termerna förälder, barn och syskon används för att beskriva relationerna.

  • I ett nodträd kallas toppnoden roten (eller rotnoden)

  • Varje nod har exakt en förälder, förutom roten (som inte har någon förälder)

  • En nod kan ha ett antal barn

  • Syskon (bröder eller systrar) är noder med samma förälder

<html>

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

Från HTML-koden ovan kan du läsa:

  • ><html> är rotnoden

  • ><html> har inga föräldrar

  • ><html> är föräldern till <head> och >< body>

  • <head> är det första barnet till ><html>

  • ><body> är det sista barnet till ><html>

och :

  • <head> har ett barn:

  • <title> har ett underordnat (en textnod): "DOM Tutorial"

  • <body> har två barn: ><h1> och p>

  • <h1> har ett barn: "DOM Lektion ett"

  • ><p> har ett barn: "Hej världen!"

  • <h1> och ><p> är syskon



Navigera mellan noder

Du kan använda följande nodegenskaper för att navigera mellan noder med JavaScript:

  • parentNode

  • barnnoder[nodnummer]

  • firstChild

  • lastChild

  • nextSibling

  • föregåendeSibling


Underordnade noder och nodvärden

Ett vanligt fel i DOM-behandling är att förvänta sig att en elementnod innehåller text.

Exempel:

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

Elementnoden <title> (i exemplet ovan) innehåller inte text.

Den innehåller en textnod med värdet "DOM Tutorial".

Värdet på textnoden kan nås av nodens innerHTML-egenskap:

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

Att komma åt innerHTML-egenskapen är detsamma som att komma åt nodeValue av det första barnet:

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

Att komma åt det första barnet kan också göras så här:

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

Alla (3) följande exempel hämtar texten från ett ><h1>-element och kopierar det till ett ><p>-element:

Exempel

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

Prova själv →

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

Exempel

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

Prova själv →

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

Exempel

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

Prova själv →

<!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 den här handledningen använder vi egenskapen innerHTML för att hämta innehållet i en HTML-element.

Däremot lärande de andra metoderna ovan är användbara för att förstå trädstrukturen och navigering av DOM.


DOM rotnoder

Det finns två speciella egenskaper som tillåter åtkomst till hela dokumentet:

  • document.body - Brödtexten i dokumentet

  • document.documentElement - Hela dokumentet

Exempel

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

Prova själv →

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

Exempel

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

Prova själv →

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

Egenskapen nodeName

Egenskapen nodeName anger namnet på en nod.

  • nodeName är skrivskyddad

  • nodNamn på en elementnod är samma som taggnamnet

  • nodeNamn på ett attribut nod är attributnamnet

  • nodNamn på en textnod är alltid #text

  • nodNamn på dokumentnoden är alltid #dokument

Exempel

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

Prova själv →

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

Obs! nodnamn innehåller alltid taggnamnet med versaler för ett HTML-element.


Egenskapen nodeValue

Egenskapen nodeValue anger värdet på en nod.

  • nodeValue för elementnoder är null

  • nodeValue för textnoder är själva texten

  • nodeValue för attributnoder är attributvärdet


Egenskapen nodeType

Egenskapen nodeType är skrivskyddad. Den returnerar typen av en nod.

Exempel

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

Prova själv →

<!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 viktigaste nodeType-egenskaperna är:

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 är utfasad i HTML DOM (men fungerar). Den är inte utfasad i XML DOM.