HTML DOM komandos

HTML DOM lietuviškai

Lukas

HTML DOM‘as nėra sudėtingas, jame nėra daug komandų. Štai keletas dažnai naudojamų nustatymų:

html_dom_objektas.innerHTML – nurodo vidinį objekto x tesktą

html_dom_objektas.nodeName – nurodo x objekto pavadinimą

html_dom_objektas.nodeValue – nurodo x objekto reikšmę

html_dom_objektas.parentNode – parenka tėvinį objektą x objekto

html_dom_objektas.childNodes – parenka visus vidinius x objekto objektus

html_dom_objektas.attributes – objekto x atributų objektai

Be parametrų taip pat yra keletas DOM metodų, komandų. Jos dažnai naudojamos programuojant su JavaScript:

html_dom_objektas.getElementById(id) – parenka elementą pagal id reikšmę.

html_dom_objektas.getElementsByTagName(pavadinimas) – parenka HTML elementus pagal žymių pavadinimus

html_dom_objektas.appendChild(objektas) – įterpia dukterinį objektą objektui nurodytam skliausteliuose

html_dom_objektas.removeChild(objektas) – panaikina dukterinį objektą iš nurodyto objekto skliausteliuose

Keletas pavyzdžių

Pirmas pavyzdys

Kintamajam x priskiriami visi <p> elementai ir jų visų vidinis html yra atspausdinamas į naršyklę:

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

Antras pavyzdys

Turime paprastą html puslapį su keliais paragrafais, vienu div elementu. 2 paragrafai yra viduje div elemento.

<html>
 
  <body>
 
    <p>Sveikas pasauli!</p>
 
    <div id="main">
 
      <p>HTML DOM‘as yra labai naudingas.</p>
 
      <p>Šiame pavyzdyje matome metodo <b>getElementsByTagName</b> panaudojimo galimybes</p>
 
    </div>

Su JavaScript paimame elementą pagal id „main“, tada paimame jo viduje esančius paragrafus.

Antroji JavaScript eilutė atspausdina sakinį „Pirmasis paragrafas div viduje“ ir pirmojo paragrafo vidini html kodą. Šiuo atveju – parpastą tekstą.

<script type="text/javascript">
 
x=document.getElementById("main").getElementsByTagName("p");
 
document.write("Pirmasis paragrafas div viduje: " + x[0].innerHTML);
 
</script>

Pabaigiamos html dokumento body ir html dalys:

1
2
3

  </body>
 
</html>

Visas kodas vienoje vietoje:

<html>
  <body>
    <p>Sveikas pasauli!</p>
    <div id="main">
      <p>HTML DOM‘as yra labai naudingas.</p>
      <p>Šiame pavyzdyje matome metodo <b>getElementsByTagName</b> panaudojimo galimybes</p>
    </div>
    <script type="text/javascript">
      x=document.getElementById("main").getElementsByTagName("p");
      document.write("Pirmasis paragrafas div viduje: " + x[0].innerHTML);
    </script>
  </body>
</html>