HTML DOM Juurdepääs Liidestele

HTML DOM abil saavutame juurdepääsu igale liidesele Html dokumendis.

Juurdepääsu võimalused:

Kasutatakse getElementByld() meetodit
Kasutatakse getElementsByTagname() meetodit
Navigeerides liidestes kasutades nende omavahelist seost

getElementById() Meetod

getElementById() meetod pöördub elemendi poole määratud id abil.
Kirjaviis e. süntaks on selline:

document.getElementById("mingiID");

Proovi ise:

Pane tähele: getElementById() meetod ei tööta XML'is.

getElementsByTagName() Meetod

getElementsByTagName() meetod kasutab kõiki elemente määratud märgise abil.
Kirjaviis e. süntaks on selline:

node.getElementsByTagName("märgise nimi");

Näide 1

Allpool olevas näites nodeList kasutab kõiki <p> elemente dokumendis:

document.getElementsByTagName("p");

Proovi ise:

Näide 2

Järgnevas näites nodeList kasutab kõiki <p> elemente mis on elemendi id="pea" järglased:

document.getElementById('main').getElementsByTagName("p");

Proovi ise:

DOM Liideste Kollektsioon

getElementsByTagName() meetod kogub liidesed. Allpool olevas näites kirjutatud kood kollektsioneerib <p> liidesed muutujasse x.

x=document.getElementsByTagName("p");

x'is asuvale <p> elemendile juurdepääs on võimalik numbrilise viite e. indeksi abil. Teisele <p> elemendile avab juurdepääsu selline kirjaviis:

y=x[1];

Proovi ise:

Pane tähele: Viide e. indeks algab nulliga (0).

DOM Liideste Kollektsiooni Pikkus

Pikkuse omadus võimaldab määrata liideste hulka arvuliselt:

x=document.getElementsByTagName("p");
		for (i=0;i<x.length;i++)
  {
  document.write(x[i].innerHTML);
  document.write("<br />");
  }

Proovi ise:

Navigeerimine liidestes

Omadused parentNode, firstChild ja lastChild järgivad dokumendi struktuuri ning võimaldavad navigeerida liidestes mis on omavahel suguluses.

Vaatame ühte dokumenti:

      <html>
    <body>
<p id="intro">PyramDesign näide</p>
 <div id="main">
<p id="main1">HTML DOM on vjalik</p>
<p id="main2">See näide demonstreerib 
liideste <b>omavahelisi suhteid</b></p>
 </div>
    </body>
      </html>

Ülal toodud näites, <p id="intro"> on <body> elemendi esimene tütar-liides (firstChild) ja <div> element on <body> elemendi viimane tütar-liides.

Sellest järeldub, et <body> on iga <p> elemendi, juur-liides (parentNode).

firstChild omadust kasutades saavutatakse juurdepääs elemendi tekstile:

var x=document.getElementById("intro");
var text=x.firstChild.nodeValue;

Proovi ise:

Juur liidesed

On veel olemas kaks spetsiaalset dokumendi omadust mis võimaldavad juurdepääsu elementidele:

documentElement
document.body

Esimene omadus pöördub dokumendi juur-liidesele ning see omadus asub kõigis XML ja HTML dokumentides.

Teine on spetsiaalne omadus Html dokumendile mis võimaldab otse juurdepääsu <body> märgisesse.

Proovi ise:

Paneme DOM'i tööle

Proovime luua HTML DOM abil väikse tabeli mille lahtrites on mingisugune tekst. Antud näites oleks tekst "lahter on reas y tulbas x" Kirjuame sellise dokumendi:

      <html>
  <head>
<title>HTML Tabel koos JavaScript
 ja DOM Kasutajaliidesega</title>
<script>
    function start() {
        // määrame kasutajaliidese body elemendile
        var body = document.getElementsByTagName("body")[0];

        // loome <table> elemendi ja <tbody> elemedi
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // loome lahtrid
        for (var j = 0; j < 2; j++) {
            // loome tabeli read
            var row = document.createElement("tr");

            for (var i = 0; i < 2; i++) {
                // Loome <td> elemendi ja teksti liidese
                // tekst asub <td> sees ning paneme <td>
                // tabeli rea lõppu
                var cell = document.createElement("td");
                var cellText = document.createTextNode("lahter on reas 
"+j+", tulbas "+i);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // lisame rea table body lõppu
            tblBody.appendChild(row);
        }

        // paneme <tbody>  <table> sisse

        tbl.appendChild(tblBody);
        // lisame <table> <body> sisse
        body.appendChild(tbl);
        // määrame äärise atribuudi 2;
        tbl.setAttribute("border", "2");
    }
</script>
 </head>
  <body onload="start()">
   </body>
    </html>

Pane tähele: Muutuja var cellText = document.createTextNode("lahter on reas "+j+", tulbas "+i); on selles näites poolitatud kuna antud lehe disain on selline. Tegelikult ei ole lubatud koodi jätkamine uuelt realt.

Vaatame mida me siis tegime:

Kõigepealt lõime <table> elemendi.
Järgmisena lõime <tbody> elemendi mis on omakorda <table> elemendi tütar-liides.
Seejärel kasutasime silmust (loop) elementi <tr> elemendi loomiseks mis omakorda on <tbody> elemendi tütar-liides.
Igale <td> elemendile lõime teksti-liidese milleks on tekst tabeli lahtris.

Nüüd kus oleme loonud <table>, <tbody>, <tr> ja <td> elemendid ning tekstiliidese on vaja need vastavalt lisada juurelementidesse:

Kõigepealt lisame teksti-liidese tema juurelementti <td>
```
cell.appendChild(cellText);
```
Järgnevalt lisame iga <td> elemendi tema juurelementti <tr>
```
row.appendChild(cell);
```
Siis lisame <tbody> elemendi tema juurelementti <table>
```
tbl.appendChild(tblBody);
```
Lõpuks lisame <table> elemendi tema juurelementti <body>
```
body.appendChild(tbl);
```

Jäta see tehnika endale meelde. Kõigepealt loome elemendid ülevalt alla ja siis lisame "tütred" nende vanematele e. juurtele, alt ülesse.

Proovi ise:

HTML DOM Juurdepääs Liidestele

Menüü

Kasulikud lingid