JavaScript HTML DOM 导航

通过 HTML DOM，您能够使用节点关系来导航节点树。

DOM Knoten

根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：

  • 整个文档是文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 所有注释是注释节点
DOM HTML boom

有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。

能够创建新节点，还可以修改和删除所有节点。

节点关系

节点树中的节点彼此之间有一定的等级关系。

  • 术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
  • 在节点树中，顶端节点被称为根（根节点）。
  • 每个节点都有父节点，除了根（根节点没有父节点）。
  • 节点能够拥有一定数量的子
  • 同胞（兄弟或姐妹）指的是拥有相同父的节点。
<html>
   <head>
       <title>DOM 教程</title>
   </head>
  <body>
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML boom

从以上的 HTML 中您能读到以下信息：

  • 是根节点
  • 没有父
  • 是 <head> 和 <body> 的父
  • 是 <html> 的第一个子
  • <body> is de laatste zoon van <html>

Ook:

  • <head> heeft een zoon: <title>
  • <title> heeft een zoon (tekstknooppunt): "DOM Handleiding"
  • <body> heeft twee zonen: <h1> en <p>
  • <h1> heeft een zoon: "DOM Eerste Les"
  • <p> heeft een zoon: "Hallo wereld!"
  • <h1> en <p> zijn zussen

Navigeren tussen knooppunten

Met JavaScript kunt u de volgende knooppuntattributen gebruiken om tussen knooppunten te navigeren:

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

subknooppunten en knooppuntwaarden

Een veelgemaakte fout in het DOM-behandeling is het geloven dat elementknooppunten tekst bevatten.

Voorbeeld:

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

elementknooppunt <title> (van het bovenstaande voorbeeld) het bevat geentekst.

het bevat een tekst met de waarde "DOM Handleiding"tekstknooppunt.

De waarde van een tekstknooppunt kan worden verkregen via de knooppunt innerHTML eigenschappen te verkrijgen:

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

Toegang tot de innerHTML-eigenschap is equivalent aan toegang tot de eerste subnode: nodeValue:

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

Het kan ook op deze manier worden toegang verkregen tot de eerste subnode:

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

De volgende drie voorbeelden halen <h1> het tekst van het element en kopiëren naar <p> Elementen:

Voorbeeld 1

<html>
<body>
<h1 id="id01">Mijn eerste pagina</h1>
<p id="id02">Hallo!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Probeer het zelf uit

Voorbeeld 2

<html>
<body>
<h1 id="id01">Mijn eerste pagina</h1>
<p id="id02">Hallo!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Probeer het zelf uit

Voorbeeld 3

<html>
<body>
<h1 id="id01">Mijn eerste pagina</h1>
<p id="id02">Hallo!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Probeer het zelf uit

InnerHTML

In deze handleiding gebruiken we innerHTML Haal de inhoud van het HTML-element op.

Maar, het leren van de andere methoden kan helpen om de boomstructuur en navigatie van DOM te begrijpen.

DOM wortelknooppunt

Er zijn twee speciale eigenschappen die toegang tot het volledige document mogelijk maken:

  • document.body - Body van het document
  • document.documentElement - Volledig document

Voorbeeld

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM is erg nuttig!</p>
<p>Dit voorbeeld demonstreert de eigenschap <b>document.body</b>.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Probeer het zelf uit

Voorbeeld

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM is erg nuttig!</p>
<p>Dit voorbeeld demonstreert de eigenschap <b>document.documentElement</b>.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Probeer het zelf uit

nodeName eigenschap

nodeName Eigenschap definieert de naam van het knooppunt.

  • nodeName is alleen lezen.
  • De naam van het elementknooppunt is gelijk aan de naam van de tag
  • De naam van de eigenschap van het eigenschapsknooppunt is de naam van de eigenschap
  • De naam van het tekstknooppunt is altijd #text
  • De naam van het documentknooppunt is altijd #document

Voorbeeld

<h1 id="id01">Mijn eerste webpagina</h1>
<p id="id02">Hallo!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Probeer het zelf uit

Opmerking:nodeName bevat altijd de hoofdletters van de grootste tag van het HTML-element.

nodeValue eigenschap

nodeValue Eigenschap definieert de waarde van het knooppunt.

  • De eigenschap nodeValue van het elementknooppunt is undefined
  • De eigenschap nodeValue van de tekstknooppunt is de teksttekst
  • De eigenschap nodeValue van de eigenschap is de waarde van de eigenschap

nodeType eigenschap

nodeType Eigenschap retourneert het type van het knooppunt.nodeType is alleen lezen.

Voorbeeld

<h1 id="id01">Mijn eerste webpagina</h1>
<p id="id02">Hallo!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Probeer het zelf uit

De belangrijkste nodeType-eigenschap is:

Knoop Type Voorbeeld
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (verouderd)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Dit is een opmerking -->
DOCUMENT_NODE 9 Het HTML-document zelf (de ouder van <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 is in HTML DOM verouderd. In XML DOM is het niet verouderd.