JavaSkripti DOM-i õpetus koos näitega
Milles on DOM JavaSkript?
JavaSkript pääseb juurde kõikidele veebilehe elementidele, kasutades dokumendiobjekti mudelit (DOM). Tegelikult loob veebibrauser lehe laadimisel veebilehe DOM-i. DOM-mudel luuakse selliste objektide puuna:
Kuidas kasutada DOM-i ja sündmusi
Kasutades DOM-i, JavaSkript võib täita mitut ülesannet. See võib luua uusi elemente ja atribuute, muuta olemasolevaid elemente ja atribuute ning isegi eemaldada olemasolevaid elemente ja atribuute. JavaScript saab ka reageerida olemasolevatele sündmustele ja luua lehel uusi sündmusi.
getElementById, innerHTML näide
- getElementById: juurdepääs elementidele ja atribuutidele, mille ID on määratud.
- innerHTML: elemendi sisule juurdepääsemiseks.
Proovige seda näidet ise:
<html> <head> <title>DOM!!!</title> </head> <body> <h1 id="one">Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p>This is the technology section.</p> <script type="text/javascript"> var text = document.getElementById("one").innerHTML; alert("The first heading is " + text); </script> </body> </html>
getElementsByTagName näide
getElementsByTagName: elementidele ja atribuutidele juurdepääsuks märgendi nime abil. See meetod tagastab an massiivi kõigist sama sildinimega üksustest.
Proovige seda näidet ise:
<html> <head> <title>DOM!!!</title> </head> <body> <h1>Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p id="second">This is the technology section.</p> <script type="text/javascript"> var paragraphs = document.getElementsByTagName("p"); alert("Content in the second paragraph is " + paragraphs[1].innerHTML); document.getElementById("second").innerHTML = "The orginal message is changed."; </script> </body> </html>
Sündmuste töötleja näide
- createElement: uue elemendi loomiseks
- removeChild: eemaldage element
- Saate lisada an sündmuste käitleja konkreetsele elemendile nagu see:
document.getElementById(id).onclick=function() { lines of code to be executed }
OR
document.getElementById(id).addEventListener("click", functionname)
Proovige seda näidet ise:
<html> <head> <title>DOM!!!</title> </head> <body> <input type="button" id="btnClick" value="Click Me!!" /> <script type="text/javascript"> document.getElementById("btnClick").addEventListener("click", clicked); function clicked() { alert("You clicked me!!!"); } </script> </body> </html>