JavaScript HTML DOM 导航

Genom HTML DOM kan du använda nodrelationer för att navigera i nodträdet.

DOM 节点

Enligt W3C HTML DOM-standard är allt i HTML-dokumentet en nod:

  • Hela dokumentet är en dokumentnod
  • Varje HTML-element är en elementnod
  • Text inom HTML-element är textnod
  • Varje HTML-attribut är en attributnod
  • Alla kommentarer är kommentarinnoder
DOM HTML träd

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

Du kan skapa nya noder och ändra och ta bort alla noder.

Nodrelationer

Noder i nodträdet har en viss hierarkisk relation.

  • Termer (förälder, barn och syster, parent, child och sibling) används för att beskriva dessa relationer.
  • I nodträdet kallas toppnoden för roten (rodnoden)
  • Varje nod har en föräldernod, utom roten (rodnoden har ingen föräldernod)
  • Noder kan ha ett visst antal barn
  • Syster (bror eller syster) betyder noder som har samma förälder.
<html>
   <head>
       <title>DOM-lärbok</title>
   </head>
  <body>
       <h1>DOM första lektionen</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML träd

Från ovanstående HTML kan du läsa följande information:

  • <html> är roddnoden
  • <html> har ingen förälder
  • <html> är föräldern till <head> och <body>
  • <head> är den första dottern till <html>
  • <body> är den sista underen till <html>

Samtidigt:

  • <head> har en under: <title>
  • <title> har en under (textnod): "DOM-lärplattform"
  • <body> har två under: <h1> och <p>
  • <h1> har en under: "DOM första lektionen"
  • <p> har en under: "Hej värld!"
  • <h1> och <p> är syskon

Navigera mellan noder

Genom JavaScript kan du använda följande nodattribut för att navigera mellan noder:

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

Undernoder och nodvärden

Ett vanligt misstag i DOM-behandling är att tro att elementnoder innehåller text.

Exempel:

<title id="demo">DOM-lärplattform</title>

（i ovanstående exempel elementnoden <title>） Det innehåller inteText.

Det innehåller texten "DOM-lärplattform".Textnod.

Textnodens värde kan fås genom att använda nodens innerHTML Genom att använda följande egenskaper kan du navigera mellan noder med JavaScript:

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

Åtkomsten till innerHTML-egenskapen är samma som att nå den första undernoden: nodeValue:

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

Det kan också vara så att man når den första undernoden:

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

Följande tre exempel hämtar <h1> Kopiera texten från elementet till <p> Elementet innehåller:

Exempel 1

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

亲自试一试

Exempel 2

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

亲自试一试

Exempel 3

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

亲自试一试

InnerHTML

I denna tutorial använder vi innerHTML Hämta innehållet i HTML-elementet.

Men, att lära sig de andra metoderna hjälper till att förstå DOM:s trädstruktur och navigering.

DOM-rotnoden

Det finns två specialattribut som tillåter åtkomst till hela dokumentet:

  • document.body - Dokumentets body
  • document.documentElement - Hel dokument

Exempel

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM är mycket användbart!</p>
<p>Denna exempelvis visar <b>document.body</b> egenskapen.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

亲自试一试

Exempel

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM är mycket användbart!</p>
<p>Denna exempelvis visar <b>document.documentElement</b> egenskapen.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

亲自试一试

nodeName egenskap

nodeName egenskapen definierar nodens namn.

  • nodeName är skrivskyddad
  • elementnodens nodeName är lika med etiketten
  • Attributnodens nodeName är attributnamnet
  • Textnodens nodeName är alltid #text
  • Dokumentnodens nodeName är alltid #document

Exempel

<h1 id="id01">Min första webbsida</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

亲自试一试

Anmärkning:nodeName innehåller alltid den stora etiketten för HTML-elementet.

nodeValue egenskap

nodeValue egenskapen definierar nodens värde.

  • elementnodens nodeValue är undefined
  • textnodens nodeValue är textinnehållet
  • egenskapen nodeValue är attributvärdet

nodeType egenskap

nodeType egenskap returnerar nodens typ.nodeType är skrivskyddad.

Exempel

<h1 id="id01">Min första webbsida</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 中未弃用。