Johdatus ohjelmointiin

Sorakuilu

DOM - demokokoelma

Lähde: dom-tutorials

DOMissa liikkuminen

getElementById

Hyödyllisin tapa lukea DOM-elementtejä on getElementById.

  document.getElementById('star').src = 'star_on.gif';

childNodes, children

Joskus dokumentin elementeillä ei ole id:itä (esim. teksteillä ei aina ole). Siinä tilanteessa voidaan käyttää hyväksi childNodes -ominaisuutta, joka sisältää järjestyksessä olevan taulukon (array) lapsista (voimme siis käyttää taulukon indeksejä viittaamaan lapsiin).

Jos kutsumme suoraan childNodes -ominaisuutta, JavaScript laskee mukaan kaikki tekstinodet, elementit, kommentit jne. Yleensä kannattaa kutsua elementtejä, so käyttää children-ominaisuutta.

Kirjoita JavaScriptiä, joka hakee getElementById-metodin avulla keskimmäisen tähden ja asettaa sen src-attribuutin arvoksi "star_on.gif".

Muistathan, että JavaScript-taulukoiden indeksit alkavat 0:sta.

<span id="stars">
<img src="star_off.gif">
<img src="star_off.gif">
<img src="star_off.gif">
</span>

firstChild, firstElementChild, lastChild, lastElementChild

Taulukon ensimmäisen ja viimeisen lapsen voi hakea "oikoreiteillä".

firstChild ja lastChild palauttavat ensimmäisen ja viimeisen solmun lapsen, mikä voi olla mikä tahansa teksti-, kommentti- tai elementtisolmu. firstElementChild ja lastElementChild palauttavat ensimmäisen ja viimeisen elementtisolmun (usein tarpeellisempi).

Kirjoita JavaScriptiä, joka hakee span-elementistä tähden käyttämällä firstChild ja/tai lastChild-ominaisuutta ja asettaa sen jälkeen elementin src-attribuutin arvoksi "star_on.gif".

<span id="phrase">
Tuiki tuiki
<u>
  <img src="star_off.gif">
  tähtönen
  </u>
</span>

previousSibling ja nextSibling

previousSibling ja nextSibling -ominaisuudet antavat mahdollisuuden selata sivuttaisuunnassa DOM-puuta.

Kirjoita JavaScriptiä, joka hakee span-elementistä viimeisen elementin ja sitten palaa ensimmäiseen ja vaihtaa sen 'star_on.gif':ksi. Muut saavat jäädä 'star_off.gif':ksi.

<span>
<img src="star_off.gif">
<img src="star_off.gif">
<img id="laststar" src="star_off.gif">
</span>

parentNode

Viimeinen DOMissa liikkumisen ominaisuus on parentNode. Se luonnollisesti palauttaa solmun, jonka sisällä nykyinen solmu on.

Kirjoita ohjelma, joka aloittaa pienellä, siityy tähteen ja "sytyttää" sen. Saatko tehtyä sen kolmella vaiheella?

<span>
 <b>
  <small id="start_here">
   Twinkle
   </small>
  </b>
 <i>
  twinkle little
  <img src="star_off.gif">
 </i>
<span>

DOMin muokkaaminen

innerHTML

Yksinkertaisin tapa muuttaa DOMia on käyttää HTML elementin (innerHTML -ominaisuutta. Se poistaa aikaisemman elementin sisällön ja korvaa sen lisäämälläsi.

Esimerkiksi:

 element.innerHTML = 'Hello
World'

removeChild

innerHTML:n käyttö sisältää kuitenkin riskejä: lähdemme siis tutkimaan muita, turvallisempia vaihtoehtoja.

Koska tuhoaminen on aina helpompaa kuin lisääminen, aloitamme tuhoamalla solmun eli noden

Huomaa, että tätä metodia voidaan kutsua vain vanhemman (parentin) kautta.

Esimerkiksi:

node1.removeChild(node2)

Kirjoita JavaScriptiä, joka poistaa seuraavan kuva-elementin span-elementistä

<span>
 Ammu alas
 <img id="fallenstar" src="star_on.gif">
</span>

appendChild

Solmuja voi lisätä elementin lapsiksi appendChild -metodilla. Sitä kutsutaan uuden vanhemman sisältä ja se saa argumentilksi (syötteeksi) lapsen. Jos lapsi, jota olet lisäämässä on jo lemassa DOMissa, se poistetaan automaattisesti sijaintipaikasta. Kaikki lapsenlapset seuraavat lasta

Esimerkiksi:

node1.appendChild(node2)

Kirjoita JavaScriptiä, joka siirtää seuraavan kuva-elementin span-elementistä (source) toiseen span-elementiin (target) muuttamatta tekstiä.

<span>
 <span id="source">
   Tässä on tähti
 <img src="star_on.gif">
 </span>
 <span id="target">
   Siirrä se tänne
  </span>
</span>

document.createTextNode

Uuden solmun (noden) luominen on helppoa, käytä kutsua:

 document.createTextNode('hello')

Seuraava span-elementti sisältää laskukaavan 6 * 7 = . Kirjoita JavaScriptiä, joka täydentää laskutoimituksen.

<span id="math">
  6 * 7 =
</span>

document.createElement

Uudet elementit luodaan kutsumalla:

 document.createElement('SPAN')
 

Kirjoita JavaScriptiä, joka luo uuden kuva-elementin ja asettaa sen src-attribuutin arvoksi "star_on.gif"

<span id="sky">
</span>

Lähdekoodi