JavaScript HTML DOM Navigation

Gennem HTML DOM kan du bruge noderelationer til at navigere i nodetræet.

DOM 节点

Ifølge W3C HTML DOM-standard er alt i HTML-dokumentet en node:

  • Hele dokumentet er en dokumentnode
  • Hvert HTML-element er en elementnode
  • Teksten inden for HTML-elementer er en tekstnode
  • Hver HTML-egenskab er en egenskabsnode
  • Alle kommentarer er kommentarnoder
DOM HTML træ

Med HTML DOM kan alle noder i nodetræet tilgås ved hjælp af JavaScript.

Man kan oprette nye noder, samt ændre og slette alle noder.

Noderelationer

Noder i nodetræet har en vis hierarkisk relation til hinanden.

  • Termer (fader, barn og kolleger, parent, child og sibling) bruges til at beskrive disse relationer.
  • I nodetræet kaldes toppen rod (rodnoden er rodnoden).
  • Hver node har en fadernode, med undtagelse af roden (rodnoden har ingen fadernode).
  • Noder kan have et bestemt antal undernoder
  • Kolleger (brødre eller søstre) refererer til noder, der har samme fader.
<html>
   <head>
       <title>DOM tutorial</title>
   </head>
  <body>
       <h1>DOM første lektion</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML træ

Fra det ovenstående HTML kan du læse følgende information:

  • html er rodnoden
  • html har ingen fader
  • html er faderen til head og body
  • head er den første underen af html
  • <body> er <html> sidste under

Samtidig:

  • <head> har en under: <title>
  • <title> har en under (tekstknude): "DOM-tutorial"
  • <body> har to under: <h1> og <p>
  • <h1> har en under: "DOM første lektion"
  • <p> har en under: "Hello world!"
  • <h1> og <p> er søskende

Navigere mellem noder

Med JavaScript kan du bruge følgende nodenegenskaber til at navigere mellem noder:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

underknuder og knudeværdier

En almindelig fejl i DOM-behandling er at tro, at elementknuder indeholder tekst.

Eksempel:

<title id="demo">DOM-tutorial</title>

（i ovenstående eksempel）elementknuden <title> Inkluderer ikketekst.

Den indeholder teksten "DOM-tutorial"tekstknude.

Tekstknudens værdi kan fås gennem knudens innerHTML egenskab for at tilgå:

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

Adgang til innerHTML-egenskaben svarer til adgang til den første undernode nodeValue:

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

Man kan også tilgå den første undernode på denne måde:

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

Følgende tre eksempler henter <h1> Elementets tekst og kopier til <p> Elementet indeholder:

Eksempel 1

<html>
<body>
<h1 id="id01">Min første side</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

亲自试一试

Eksempel 2

<html>
<body>
<h1 id="id01">Min første side</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

亲自试一试

Eksempel 3

<html>
<body>
<h1 id="id01">Min første side</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

亲自试一试

InnerHTML

I denne tutorial bruger vi innerHTML Hent indholdet af HTML-elementet.

Men, at lære de andre metoder hjælper med at forstå DOM's træstruktur og navigation.

DOM rodnode

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

  • document.body - Dokumentets body
  • document.documentElement - Hele dokumentet

Eksempel

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM er meget nyttigt!</p>
<p>Dette eksempel viser <b>document.body</b> egenskaben.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

亲自试一试

Eksempel

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM er meget nyttigt!</p>
<p>Dette eksempel viser <b>document.documentElement</b> egenskaben.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

亲自试一试

nodeName egenskab

nodeName egenskab definerer nodens navn.

  • nodeName er skrivebeskyttet
  • Elementnodens nodeName svarer til mærkenavnet
  • Egenskabens nodeName er navnet på egenskaben
  • Tekstnodens nodeName er altid #text
  • Dokumentnodens nodeName er altid #document

Eksempel

<h1 id="id01">Min første webside</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

亲自试一试

Bemærk:nodeName indeholder altid HTML-elementets store skriftlignende navn.

nodeValue egenskab

nodeValue egenskab definerer nodens værdi.

  • elementnodens nodeValue er undefined
  • tekstnodens nodeValue er teksten
  • egenskabens nodeValue er værdien af egenskaben

nodeType egenskab

nodeType egenskab returnerer nodens type.nodeType er skrivebeskyttet.

Eksempel

<h1 id="id01">Min første webside</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeType;
</script>

亲自试一试

最重要的 nodeType 属性是：

节点 类型 例子
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" （弃用）
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- 这是注释 -->
DOCUMENT_NODE 9 HTML 文档本身（<html> 的父）
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 在 HTML DOM 中已弃用。XML DOM 中未弃用。