JavaScript HTML DOM-navigointi

HTML DOM:n avulla voit navigoida solmutreessä solmusuhteiden avulla.

DOM Solmu

W3C HTML DOM -standardin mukaan kaikki asiat HTML-dokumentissa ovat solmuja:

  • Kokonainen dokumentti on dokumenttisolmu
  • Jokainen HTML-elementti on elementtisolmu
  • HTML-elementin sisällä oleva teksti on tekstisolmu
  • Jokainen HTML-ominaisuus on ominaisuussolmu
  • Kaikki huomautukset ovat huomautussoluja
DOM HTML puu

HTML DOM:n avulla kaikki solmut solmutreessä voidaan saavuttaa JavaScriptillä.

Voit luoda uusia solmuja, muokata ja poistaa kaikkia solmuja.

Solmuserheet

Solmutree-structuurin solmut ovat toistensa kanssa tietyn tasoista

  • Termit (isä, lapsi ja sisarukset, parent, child ja sibling) käytetään näiden suhteiden kuvaamiseen.
  • Solmutree-structuurissa ylin solmu kutsutaan juureksi (juurisolmu ei ole isäsolmu).
  • Jokaisella solmulla on isäsolmu, paitsi juurisolmulla (juurisolmu ei ole isäsolmu).
  • Solmu voi omaa tiettyä määrää lapsisoluja
  • Sisarukset (veli tai sisko) tarkoittavat solmuja, joilla on sama isä.
<html>
   <head>
       <title>DOM opas</title>
   </head>
  <body>
       <h1>DOM ensimmäinen luokka</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML puu

Aiemmasta HTML:stä voit lukea seuraavat tiedot:

  • Html on juurinodes
  • Html ei ole isä
  • Html on isä head ja bodylle
  • Head on on ensimmäinen lapsi html:stä
  • <body> on <html>:n viimeinen lapsi

Samalla：

  • <head>illä on yksi lapsi：<title>
  • <title>illä on yksi lapsi (tekstisolu)："DOM oppitunti"
  • <body>illä on kaksi lasta：<h1> ja <p>
  • <h1>illä on yksi lapsi："DOM ensimmäinen luokka"
  • <p>illä on yksi lapsi："Hello world!"
  • <h1> ja <p> ovat sisaruksia

Navigointi solujen välillä

JavaScriptin avulla voit käyttää seuraavia soluominaisuuksia navigoidaksesi solujen välillä：

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

lapsisolut ja solun arvo

Yksi yleinen virhe DOM-käsittelyssä on uskoa, että elementtisolussa on tekstiä.

Esimerkki：

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

（yllä olevassa esimerkissä）elementtisolua <title> Ei sisällätekstin.

Se sisältää tekstin "DOM oppitunti"Tekstisolu。

Tekstisolun arvoa voidaan saada solun innerHTML ominaisuutta käytetään

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

Vierittely innerHTML-ominaisuutta on sama kuin ensimmäisen lapsisolun nodeValue：

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

Voit myös tarkastella ensimmäistä lapsisolua seuraavasti：

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

Seuraavat kolme esimerkkiä hakevat <h1> Elementin tekstiä ja kopioi se <p> Elementissä：

Esimerkki 1

<html>
<body>
<h1 id="id01">Minun ensimmäinen sivuni</h1>
<p id="id02">Hei!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Kokeile itse

Esimerkki 2

<html>
<body>
<h1 id="id01">Minun ensimmäinen sivuni</h1>
<p id="id02">Hei!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Kokeile itse

Esimerkki 3

<html>
<body>
<h1 id="id01">Minun ensimmäinen sivuni</h1>
<p id="id02">Hei!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Kokeile itse

InnerHTML

Tässä oppaassa käytämme innerHTML Hanki HTML-elementin sisältö.

Mutta, oppiminen yllä olevista muista menetelmistä auttaa ymmärtämään DOM:n puurakenteen ja navigoinnin.

DOM juurisolmu

On kaksi erityistä ominaisuutta, jotka mahdollistavat täyden dokumentin pääsyn:

  • document.body - Dokumentin body
  • document.documentElement - Tämä on koko dokumentti

Esimerkki

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM on hyödyllinen!</p>
<p>Tämä esimerkki näyttää <b>document.body</b> ominaisuuden.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Kokeile itse

Esimerkki

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM on hyödyllinen!</p>
<p>Tämä esimerkki näyttää <b>document.documentElement</b> ominaisuuden.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Kokeile itse

nodeName ominaisuus

nodeName Ominaisuus määrittelee solmun nimen.

  • nodeName on kirjoitussuojattu
  • Elementtisolmun nodeName on sama kuin leipäteksti
  • Ominaisuuden solmun nodeName on ominaisuuden nimi
  • Tekstisolmun nodeName on aina #text
  • Dokumenttisolmun nodeName on aina #document

Esimerkki

<h1 id="id01">Minun ensimmäinen verkkosivuni</h1>
<p id="id02">Hei!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Kokeile itse

Huomautus:nodeName sisältää aina HTML-elementin suuren kirjaimen nimimerkin.

nodeValue ominaisuus

nodeValue ominaisuus määrittelee solmun arvon.

  • elementtisolmun nodeValue on undefined
  • tekstisolmun nodeValue on tekstiteksti
  • ominaisuuden nodeValue on ominaisuuden arvo

nodeType ominaisuus

nodeType ominaisuus palauttaa solmun tyyppin.nodeType on kirjoitussuojattu.

Esimerkki

<h1 id="id01">Minun ensimmäinen verkkosivuni</h1>
<p id="id02">Hei!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Kokeile itse

Tärkein nodeType-ominaisuus on:

Solmu Tyyppi Esimerkki
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (vanhentunut)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Tämä on kommentti -->
DOCUMENT_NODE 9 HTML-dokumentti itsessään (<html> vanhempi)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 on vanhentunut HTML DOM:ssa. XML DOM:ssa ei ole vanhentunut.